使多个图像适合父高度，同时保持其纵横比答案

【问题标题】：Fit multiple images to parent height while maintaining its aspect ratio使多个图像适合父高度，同时保持其纵横比
【发布时间】：2015-05-02 20:42:56
【问题描述】：

如何使这 3 张图片适合其父 div 高度，同时保持图片的纵横比？

<div id="myM">
     <div class="ab">
        <img src="http://img42.com/2lWNS+" class="cd"/>
        <img src="http://img42.com/2lWNS+" class="cd"/>
        <img src="http://img42.com/2lWNS+" class="cd"/>
     </div>
</div>

css:

#myM{
    width: 300px;
    height: 200px;
    background-color: cyan;
}
.ab{
    width: 100%;
    float: right;
}
.cd{
    max-height:33%;
    width:auto;
}

这是Fiddle

【问题讨论】：

我可以对 html 进行一些更改吗？
@ketan 谢谢。这取决于但是的，请展示你将如何做到这一点。

标签： html css

【解决方案1】：

我认为问题在于浮动将容器从流中移除。相反，您可以将容器设为内联块并使用右对齐。

https://jsfiddle.net/9uyww2j0/2/

不改变你的 HTML，我的新 CSS 是这样的：

#myM{
    width: 300px;
    height: 200px;
    background-color: cyan;
    text-align: right;
}
.ab {
    display: inline-block; /* So text-align affects it */
    height: 100%
}
.cd{
    display: block; /* So takes full width */
    height:33%;
}

【讨论】：