以相等的高度并排显示图像

Question

我想使用 CSS 来显示两个相邻的图像，但有一些限制：

• 两个图像必须具有相同的高度。（相同身高的标准是多少？）
• 两个图像的组合宽度必须等于容器的总宽度。（如果需要拉伸图像，如何分割图像的宽度？）
• 必须保持两个图像的长宽比。

不幸的是，图像和容器的尺寸事先并不知道。以下是一些图像组合示例以及预期输出：

Answer 1

仅当您事先（或稍后使用 JavaScript 动态地）知道图像的自然（原始）宽度/高度时，才能完成此操作。 如果您使用现代工具进行前端开发，或者后端可以提供（除了图像标签之外）属性中必要的图像数据或公开值，那么这是一项微不足道的任务。否则，您可能想依赖（如前所述）JavaScript。 前面两个例子：

使用 CSSflex和 CSSvar()

in wherecalc()用于计算flex-grow给定的--wCSS--h变量的宽度和高度的值：

.container {
  display: flex;
  outline: 1px solid #000;
}

.container img {
  flex-grow: calc(var(--w) / var(--h));
  width: 0;
}

<div class="container">
  <img src="https://placehold.co/100x100/f08/fff" style="--w:100; --h:100;">
  <img src="https://placehold.co/200x40/0f8/fff" style="--w:200; --h:40;">
  <img src="https://placehold.co/150x200/8f0/fff" style="--w:150; --h:200;">
  <img src="https://placehold.co/250x200/f80/fff" style="--w:250; --h:200;">
</div>

<div class="container">
  <img src="https://placehold.co/90x20/f80/fff" style="--w:90; --h:20;">
  <img src="https://placehold.co/200x60/0f8/fff" style="--w:200; --h:60;">
</div>

<div class="container">
  <img src="https://placehold.co/80x100/08f/fff" style="--w:80; --h:100;">
  <img src="https://placehold.co/40x130/f08/fff" style="--w:40; --h:130;">
</div>

<div class="container">
  <img src="https://placehold.co/50x50/f08/fff" style="--w:50; --h:50;">
  <img src="https://placehold.co/99x99/8f0/fff" style="--w:99; --h:99;">
</div>

使用 JavaScript

如果在某些情况下您无法提前知道图像的自然宽度/高度，您仍然可以依靠 JavaScript 来计算必要的flexGrow值，或者换句话说，使用setProperty--w动态分配 CSS 变量和--h相应的值：

document.querySelectorAll(".container").forEach(async(elCont) => {

  const elsImages = elCont.querySelectorAll("img");

  //stackoverflow.com/a/60949881/383904
  await Promise.all([...elsImages].filter(img => !img.complete).map(img => new Promise(resolve => img.onload = img.onerror = resolve)));

  elsImages.forEach(elImg => {
    elImg.style.setProperty("--w", elImg.naturalWidth);
    elImg.style.setProperty("--h", elImg.naturalHeight);
  });

});

.container {
  display: flex;
  outline: 1px solid #000;
}

.container img {
  flex-grow: calc(var(--w) / var(--h));
  width: 0;
}

<div class="container">
  <img src="https://placehold.co/100x100/f08/fff">
  <img src="https://placehold.co/200x40/0f8/fff">
  <img src="https://placehold.co/150x200/8f0/fff">
  <img src="https://placehold.co/250x200/f80/fff">
</div>

<div class="container">
  <img src="https://placehold.co/90x20/f80/fff">
  <img src="https://placehold.co/200x60/0f8/fff">
</div>

<div class="container">
  <img src="https://placehold.co/80x100/08f/fff">
  <img src="https://placehold.co/40x130/f08/fff">
</div>

<div class="container">
  <img src="https://placehold.co/50x50/f08/fff">
  <img src="https://placehold.co/99x99/8f0/fff">
</div>

致谢和文件：

• CSS Flex 弹性增长
• CSS 变量()
• CSS 计算()
• CSSStyle声明 setProperty
• 不同长宽比的图像
• 回调所有加载的图像