absolute img 비율 갈무리

※ 이미지 비율 구하는 사이트

http://andrew.hedges.name/experiments/aspect_ratio/

※ 구한 이미지 비율을 퍼센트로 환산하는 방법

100 / (가로비율/세로비율)

.galleryImageWrapper {
    background-color: #000;
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}
.galleryImageWrapper img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

Example 16:9 Aspect Ratio

.container {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

Try it Yourself »

Example 4:3 Aspect Ratio

.container {
    padding-top: 75%; /* 4:3 Aspect Ratio */
}

Try it Yourself »

Example 3:2 Aspect Ratio

.container {
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Try it Yourself »

Example 8:5 Aspect Ratio

.container {
    padding-top: 62.5%; /* 8:5 Aspect Ratio */
}