가로세로 비율을 유지하는 반응형 박스

div.img {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
}
div.img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

padding-bottom = 세로/가로 *100

출처

 - https://hyeonseok.com/soojung/css/2012/08/22/712.html