使图像适合保持其长宽比与其父级

Question

下面是我的div结构。 #myMenu身高是动态的。当#myMenu的高度发生变化时，如何使图像保持其纵横比？

这是预期的结果：

<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 is dynamic*/
    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%;
}

Here is a Fiddle

Answer 1

演示 - http://jsfiddle.net/victor_007/4bx0vab1/

您可以使用<img>代码