Aspect Ratio

Aspect Ratio

by habla

HTML

<div id="maincontainer">
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_10.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_1.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/horse50/two.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_2.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_3.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_4.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_5.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_6.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_7.svg" /></div>
    <div class="key"><img src="https://openclipart.org/people/kablam/kablam_Number_Animals_8.svg" /></div></div>

CSS

#maincontainer {
    display: block;
    margin: auto;
    width: 100vw;
    height: 177.7777777777778vw;
    background-color:red;
}

@media (min-aspect-ratio:9/16) {
    #maincontainer {
        height: 100vh;
        width: 56.25vh;
    }
}

.key {
    float:left;
    width: 29.3333333%;
    height: 21%;
    background-color:yellow;
    padding-left:2%;
    padding-right:2%;
    padding-bottom: 3.555555555555556%;
    padding-top: 3.555555555555556%;  
}

img {
    max-width:100%;
    max-height:100%;
}
body{
margin: 0px;
}