在保持高宽比的同时，将多幅图像与母体高度相匹配
在保持高宽比的同时，将多幅图像与母体高度相匹配
提问于 2015-05-02 12:32:19
如何使这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
Stack Overflow用户
回答已采纳
发布于 2015-05-02 12:42:56
我认为问题在于浮子将容器从流中移除。相反，您可以使容器成为内联块，并使用右对齐。
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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30002336
复制相关文章
相似问题
腾讯云开发者
