图像以适合其容器保持大小比例

Question

我有几张图片要渲染，我希望它们保持原样的大小比例。例如，如果有一个人身高 183 厘米，另一个人身高 170 厘米，我希望他们在比较时保留这些差异，这样用户就可以在屏幕上和现实中看到一个人比现实中高另一个。此外，由于图像中的人被裁剪，每张图像的高度不同，但宽度相同。

例如，一张图片可以是 width: 400px height 340px，另一张可以是 width 400px height: 800px。我有一个容器：

.container-images {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    height: 400px;
    max-height: 400px;
    max-width: 418px;
    width: 100%;
}

图片：

.container-images img {
    height: 60%;
    object-fit: contain;
    width: 100%;
}

目前我无法让图像在容器上以相似的比例显示，它们都具有相同的高度。此外，图像应该位于其容器的底部，因为我正在使用 align-items: flex-end; 我希望有人能帮助我。提前致谢。

Answer 1

似乎与预期的差不多。您的问题似乎是什么？

.container-images {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  height: 400px;
  max-height: 400px;
  max-width: 418px;
  width: 100%;
}

.container-images img {
  width: 50%;
  object-fit: contain;
  background-color: black;
}

<div class="container-images" style="background-color: red;">
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" />
</div>
<div class="container-images" style="background-color: blue;">
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

Answer 2

让我们试试这个：

.container-images {
align-items: center;
display: flex;
justify-content: center;
height: 300px;
width: 300px;
}

图片：

.container-images img {
height: 100%;
object-fit: cover;
width: 100%;
}

图像以适合其容器保持大小比例

Images to fit its container preserving size ratio

css

flexbox

object-fit