通过拉伸/缩小图像来分割两个图像之间的可用宽度（并排放置）（不使用`width = 50％`）？

Question

我想并排放置两张大小相同的图片。我希望它们都具有相同的宽度，并且在保持纵横比的同时尽可能宽。当然尊重css中设置的边距。

＆＃13;

＆＃13;

<style>
div.twoImg > img {
    margin: 10px;
}
</style>

<div class="twoImg">
    <img src="http://www.halmstad.se/images/18.23a25fbe14937ab15f72ddfc/1415104727203/Skintan_avlopp460.jpg">
    <img src="http://www.halmstad.se/images/18.23a25fbe14937ab15f72ddfc/1415104727203/Skintan_avlopp460.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

我可以使用width = 50%，但我不想考虑填充等方面的变化。还有其他选择吗？

Answer 1

这将为您http://jsfiddle.net/mm6ck3dc/20/

执行此操作

calc设置屏幕的50％减去边距宽度。

div.twoImg > img {
    margin: 10px;
    width: calc(50% - 20px);
    float: left;
}