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 code：

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

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

4 个答案: