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

2023年2月23日 264次阅读

我在一个块级容器中并排放置了两个图像,这些容器具有任意不同的尺寸(例如,它们可以是任意两个图像),我想动态调整宽度,使两个图像的整体高度为相同.我不认为这可以在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>
点赞