[CSS] 이미지의 가로/세로 비율을 유지하기(반응형)

<!-- HTML -->
<div class="d-img">
    <div class="d-img-inner">
        <img />
    </div>
</div>

/* CSS */
.d-img { 
    position:relative; 
    width:100%/* 상위 엘리먼트에 의존하여 계산 */ ; 
    height:0; 
    padding-bottom:70% /* 가로크기에 비례함 */; 
}
.d-img-inner { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}
.d-img-inner img { width:100%; height:100%; }