CSS图像行等高填充宽度并保持纵横比答案

【问题标题】：CSS image row equal height that fills width and preserves aspect ratioCSS图像行等高填充宽度并保持纵横比
【发布时间】：2021-09-13 19:43:52
【问题描述】：

我正在尝试获取 3 张具有不同纵横比的图像，以在填充容器宽度的行中显示。我希望他们的高度相等但流动。所以图像会保留它们的纵横比，但会缩放以适应容器的宽度。

这是我的尝试：

.row
  display: flex
.wrap
  padding: 0 20px
img
  object-fit: cover
  max-width: 100%
  height: 100%

它目前不保留纵横比，但它们会调整大小并填充容器宽度。

理想的解决方案不需要 Javascript

【问题讨论】：

CSS 无法做到这一点，您需要 JS 来检索比率，然后计算哪个宽度 (%) 应该是每个相同的高度并填充行。object-fit: cover 是您可以在这里拥有的最好的。如果已知比率，请参阅 aspect-ratio 如果有帮助。
object-fit：封面应该保持纵横比（即不扭曲图像），但它会根据需要在侧面（或顶部/底部）裁剪以使其适合。这是你看到的吗？
你知道图片的长宽比吗？
@AHaworth 在这种情况下，我确实知道长宽比。在这种情况下，最好硬编码而不是使用 Javascript。

标签： html css

【解决方案1】：

这是我在事先了解纵横比的基础上得出的结论：

.row
  display: flex
img
  max-width: 100%
  height: 100vw / ((900 / 400) + (300 / 300) + (400 / 300))

随意贡献任何更通用的解决方案

【讨论】：

【解决方案2】：

只需从“.wrap”中删除“padding: 0 20px”即可让图像覆盖三个 div。这是你需要的吗？

【讨论】：