Html 使图像适合，并保持其与父图像的纵横比

下面是我的div结构<代码>我的菜单高度是动态的。当

#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>

演示-

---

你可以使用

标签

你可以使用

img

标签吗？这个例子中，我只添加了

宽度

@0\o谢谢，是的，如果这有助于获得预期的结果。我同意使用

img

标签。很难保持没有固定维度的东西的纵横比。像这样的东西有用吗？我添加了另一个

div

以查看它的反应，但是

img

建议也可以起作用。@DigitalDouble感谢您的输入。这使得使用0_o答案时更有信心使用

：）

#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%;
}