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

Dynamically resize side-by-side images with different dimensions to the same height

本文关键字：调整 动态 高度 图像      更新时间：2023-09-26

我在一个尺寸任意不同的块级容器中并排有两个图像（例如，它们可以是任意两个图像），我想动态调整宽度，以便两个图像的总高度相同。我不认为这可以在我所看到的所有内容中在 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%。

如果是响应式的，请使用百分比高度和宽度：

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>

您可以按高度设置它。为您的容器div提供固定高度。

这是为您提供的解决方案：

div.container {
    height:200px;
}
div.container img {
    height: 100%;
}

吉斯菲德尔

您还有其他 2 种选择可以将所有图像提升到相同的高度：

您可以在容器上放置overflow:hidden div

或

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

为图像设置类：

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

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

网页代码： 

<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;
}
相关文章：