如何根據容器高度按比例縮放多個圖像？

Question

我想弄清楚如何做到這一點。 我有 3 張圖像，所有圖像的大小不同但特定，它們將在容器內水平滾動（容器將overflow: hidden 。該容器應在其他兩個 div 之間占用盡可能多的空間，我正在使用flex-grow: 1做到這一點flex-grow: 1 ，容器看起來不錯。

但是，那些圖像，我如何確保它們根據視口高度根據容器高度調整大小並保持比例？

我知道圖像的最大尺寸可以是寬度和高度。

請在這里查看我的示例： https://fvsu2.csb.app/

如您所見，如果圖像所在的容器的高度低於圖像本身，則圖像根本不會調整大小......？ 它只是停止，底部在視口下方。

這可能嗎？

Answer 1

你希望你的 cardImage 是高度：自動寬度：100%，你現在擁有的是相反的。

Answer 2

你可以試試這個：

1. 不要為圖像設置高度，它會扭曲圖像
2. 將容器高度設置為自動
3. 將圖像寬度設置為 100%

例子：

.container{height: auto}
.container .images{width: 100%}

在溢出的情況下，設置這個

.container{height: auto; overflow: hidden}

但如果將圖像寬度設置為 width: 100% 並確保容器的寬度以 px 為單位或使用 bootstrap 設置容器的寬度，則圖像不會溢出容器，例如

<div class="col-lg-12 col-md-12 col-sm-12"></div>

對於容器，圖像永遠不會溢出容器