반응형에서 이미지 비율 유지하기

반응형에서 이미지 비율 유지하는 간단한 팁

< div class="img-wrap">
< img >
</ div>
css >>
.img-wrap{
position:relative;
width:100%
padding-bottom: calc(높이/넓이)*100%;
}
.img-wrap img{
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%
}

간단한 비율은 아래를 참조

2:1 :padding-bottom:50%;
1:2 :padding-bottom:200%;
4:3 :padding-bottom:75%;
16:9:padding-bottom:56.25%