css div 가로길이 비례해서 높이 지정

div태그의 배경으로 이미지를 넣으려는 경우
padding-bottom을 이용해서 가로 길이에 비례한 높이를 줄 수 있다.
padding은 부모의 가로를 기준으로 그 크기가 잡히기 때문이다.

.imageContainerDiv {
    padding-bottom: 56%;
    background-size: cover;
}

참고

• https://stackoverflow.com/questions/8894506/can-i-scale-a-divs-height-proportionally-to-its-width-using-css/44058967