我有幾個要渲染的影像，我希望它們保持與它們相同的大小比例。例如，如果一個人身高 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;我希望有人可以幫助我。提前致謝。
uj5u.com熱心網友回復：
似乎作業得和預期的差不多。你的問題似乎是什么？
.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>uj5u.com熱心網友回復：
讓我們試試這個：
.container-images {
align-items: center;
display: flex;
justify-content: center;
height: 300px;
width: 300px;
}
影像：
.container-images img {
height: 100%;
object-fit: cover;
width: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467532.html
上一篇：Alt標簽頁標題“影片”