div 박스 세로길이를 가로길이에 비례하게 만들기

코딩을 하다보면..(특히 반응형) 특정 박스의 세로 길이를 가로길이에 비례하게 줄이고 싶을 때가 있다.

이런 경우는 대부분 박스 안에 이미지가 들어있을 경우가 많다. 

 여러 방법을 찾아봤지만 지금까지 발견한 가장 좋은 방법은 padding의 %를 이용하는 것이다.

아래 링크를 살펴보자.. 

http://codepen.io/wooner/pen/BjQbav 

여기서의 핵심은 아래 css에 있다. 

.lst_type_owen > ul > li .img{
    position: relative;
    height:0;
    padding-bottom:65%;
} 

기본적으로 padding의 %는 자기 자신의 부모 엘리먼트의 가로 길이를 기준으로 계산한다. 

즉 height를 0으로 주고, 부모 엘리먼트의 가로길이의 65%만큼을 padding-bottom으로 밀어서 가로길이에 비례하게 박스 크기를 변경시켜 주는 것이다. 

물론 그안에 엘리먼트는 absolute로 띄워야 한다는게 좀 찜찜할 수 있지만... 박스의 세로길이를 가로길이에 고정했다는 것 자체가, 내부 엘리먼트의 세로길이 따위 신경 안쓰겠다는 것이기 때문에.. 접근성 측면에서도 문제는 없어보인다.