html
<div class="image-wrapper">
<img class="image" />
</div>
css
.image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.26%;
overflow: hidden;
}
.image-wrapper .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다
2:1 : padding-top: 50%
1:2 : padding-top: 200%
4:3 : padding-top: 75%
16:9 : padding-top: 56.25%
어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
webp와 png 동시에 사용하기 (1) | 2024.04.19 |
---|---|
모바일에서 100vh 오류 해결방법 (0) | 2024.04.19 |
모바일에서 클릭시 연한 파란색 bg 없애기 (0) | 2024.04.04 |
swiper 옵션 정리 잘된 글 (0) | 2024.04.04 |
스크롤바 위치 상하 반전시키기 change scroll bar position (0) | 2024.01.11 |