html - 使多个图像适合父级高度，同时保持其纵横比

Question

如何在保持图像纵横比的同时使这 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

Answer 1

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

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