I have a div structure below where the height of #myMenu is dynamic. How can I ensure that the images maintain their aspect ratio when the height of #myMenu changes?
Here is the intended outcome:
<div id="myMenu">
<div class="col col20">
<div class="gents"></div>
</div>
<div class="col col20">
<div class="gents"></div>
</div>
<div class="col col20">
<div class="gents"></div>
</div>
<div id="other" class="col40">
<div class="gents"></div>
</div>
</div>
CSS:
#myMenu{
background-color: #f00;
height: 300px; /*this value varies*/
padding:0;
margin:0;
}
.gents{
width:100%;
padding-bottom:100%;
background-size:cover;
background-image: url(http://img42.com/9WM6f+);
}
.col{
width: 200px;
border:1px solid yellow;
}
.col20{
height:20%;
}
.col40{
height:40%;
}