如何根据容器高度按比例缩放多个图像？答案

【问题标题】：How can I make a number of images scale proportionally based on its container height?如何根据容器高度按比例缩放多个图像？
【发布时间】：2020-10-11 00:11:06
【问题描述】：

我正试图弄清楚如何做到这一点。我有 3 个图像，所有图像都具有不同但特定的大小，它们将在容器内水平滚动（容器将具有 overflow: hidden。该容器应在其他两个 div 之间占用尽可能多的空间，而我正在使用 flex-grow: 1 ，并且容器看起来不错。

但是，这些图像，我如何确保它们根据容器高度和视口高度调整大小并保持比例？

我知道图片在宽度和高度上的最大尺寸。

请在此处查看我的示例：https://fvsu2.csb.app/

如您所见，如果图像所在的容器的高度低于图像本身的高度，则图像根本不会调整大小...？它只是停止，底部进入视口下方。

这可能吗？

【问题讨论】：

请在您的问题中发布您的相关“minimal reproducible example”代码 - 在这里，在网站上 - 这样我们和未来的访问者可以看到代码并希望理解他们如何将您的问题的解决方案应用到他们自己的代码中。
但是我添加了代码沙箱的链接？
是的，你做到了。但是minimal reproducible example 代码必须在您的问题中出现，以防止该外部站点被移除、重组、失败或关闭。
好的。会尽快添加。如果您现在可以查看示例，如果您有任何建议，请！
您能否澄清一下“根据视口高度保持基于容器高度的比例”是什么意思？您是否希望每张图片完全显示，不进行裁剪，无论其纵横比如何，还是希望每次都完全覆盖容器空间，这可能意味着某些图片会被裁剪以适应？

标签： javascript html css flexbox

【解决方案1】：

你希望你的 cardImage 是 height:auto width:100%，你现在拥有的是相反的。

【讨论】：

请看我对我最初问题的最后评论

【解决方案2】：

你可以试试这个：

不要为图片设置高度，它会扭曲图片
将容器高度设置为自动
将图像宽度设置为 100%

示例：

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

如果溢出，设置这个

.container{height: auto; overflow: hidden}

但如果将图像宽度设置为 width: 100% 并确保容器的宽度以 px 为单位或使用引导程序设置容器的宽度，则图像不会溢出容器，例如

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

对于容器，有了这个图像永远不会溢出容器

【讨论】：

对于某些图像纵横比和容器大小，这可能意味着图像溢出容器，我不确定这是否是必需的。
好的，如果溢出，您可以在我的回复的编辑版本中添加代码
OK，所以溢出是可以接受的。我本来打算建议对象匹配，但听起来好像不需要。裁剪是可以的，我有点惊讶，但如果是这样，那么将宽度设置为 100% 可能会导致图像的顶部和底部消失并不重要。这是否意味着您已经解决了问题？
如果图片高度较长，您将是设置容器最大高度的人，那么这些图片高度不会超过最大高度，同时仍处于其纵横比，您可以使用例如设置容器的 css 最大高度max-height: 100px，第二张图片行为正常。