Aspect Ratio
CSS에서 특정 엘리먼트(ex: 이미지)의 가로, 세로 비율을 유지하는 방법
<div class="container--fixed-width">
<figure class="image--fixed-ratio">
<img src="http://placehold.it/300x400">
</figure>
</div>
.container--fixed-width {
width: 60%;
}
.image--fixed-ratio {
width: 100%;
padding-top: 100%; /* padding-top의 값을 이용해 비율을 조정한다. */
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Last updated