html - 使图像适合保持其与父级的纵横比

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>标签