将具有不同尺寸的并排图像动态调整到相同高度

Question

我在一个块级容器中并排放置了两个图像，这些容器具有任意不同的尺寸（例如，它们可以是任意两个图像），我想动态调整宽度，使两个图像的整体高度为相同。 我不认为这可以在CSS中完成我所见过的所有内容（虽然可能使用flexbox模型，但我不太了解它）所以我可能需要一个JavaScript解决方案，但我来的是由于不知道边界框的整体高度，或者调整图像的高度影响边界框的高度这意味着它不断地重新调整自身，因此失败了。

这是任意图像高度的示例： https ： //jsfiddle.net/c6h466xf/

这就是我想要实现的目标（尽管显然没有对宽度进行硬编码，我希望动态解决这些问题）： https ： //jsfiddle.net/c6h466xf/4/

这是我开始的（链接到JSFiddle需要代码）：

CSS

div.container {
    width: 100%;
}

 div.container img {
    width: 49%;
 }

HTML

<div class="container">
    <img src="http://i.imgur.com/g0XwGQp.jpg">
    <img src="http://i.imgur.com/sFNj4bs.jpg">
</div>

编辑：我不想在容器元素上设置静态高度，因为这会阻止它响应整个页面的宽度，以便图像动态地相互调整大小并响应页面的宽度，所以无论观看设备如何，它们的总组合宽度总是（例如）页面宽度的80％。

Answer 1

你可以按高度设置它。 给你的容器div一个固定的高度。

这是一个适合您的解决方案：

div.container {
    height:200px;
}

div.container img {
    height: 100%;
}

的jsfiddle

您还有2个其他选项可将所有图像调到相同高度：

你可以放置一个overflow:hidden在容器div

要么

将图像剪裁为相同大小： http ： //www.w3schools.com/cssref/pr_pos_clip.asp

Answer 2

如果它有响应，请使用百分比高度和宽度：

 html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } 

 <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div> 

Answer 3

为您的图片设置一个类：

<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >

然后你需要设置容器的高度：

div.container {
    height:200px;
}

在您的JavaScript中：

var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
    yourImg.style.height = '100%';
    yourImg.style.float = 'left';
}

Answer 4

这应该是一个简单的代码，请检查以下内容：

HTML代码：

<table class="Table">
    <tr>
        <td><img src="images/1.jpg"/></td>
        <td><img src="images/2.jpg"/></td>
        <td><img src="images/3.jpg"/></td>
        <td><img src="images/4.jpg"/></td>
    </tr>
</table>

CSS：

table { width: 100%; }
table img {
   max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}