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

我在想怎么做。我有3个图像，它们都有不同但特定的大小，将在一个容器中水平滚动（容器将具有

溢出：隐藏

。该容器应该在其他两个div之间占据尽可能多的空间，我正在使用

flex grow:1

，容器看起来不错

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

我知道图像的最大尺寸可以是宽度和高度

请看一下我的示例：

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

---

这是可能的吗？

您希望您的cardImage是高度：自动宽度：100%，您现在拥有的是相反的。

您可以尝试以下方法：

不要为图像设置高度，否则会扭曲图像

将容器高度设置为“自动”

将图像宽度设置为100%

例如：

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

如果溢出， 设定这个

但是，如果您将图像宽度设置为宽度：100%，并确保容器的宽度为px或使用引导设置容器的宽度，则图像不会溢出容器，例如

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

---

对于容器，使用此选项，图像将永远不会溢出容器

请发布您的相关“你的问题中的代码-在这里，在网站上-这样我们和未来的访问者可以看到代码，并希望了解他们如何将解决你问题的方法应用到他们自己的代码中。但是我添加了代码沙盒的链接？是的，你添加了。但是代码必须在你的问题中，以防止删除、重组、失败或关闭好的。我会尽快添加它。如果你现在能看看这个例子，如果你有什么建议的话！你能澄清一下“基于视口高度保持基于容器高度的比例”是什么意思吗？你想让每个图像完整地显示，没有裁剪，不管它的纵横比是什么，还是想要conta每次都会完全覆盖Inner空间，这可能意味着某些图像会被裁剪以适合？对于某些图像纵横比和容器大小，这可能意味着图像溢出容器，我不确定这是否是必需的。好的，如果溢出，您可以在我的replyOK的编辑版本中添加代码，因此溢出为accept可以。我本来打算建议对象匹配，但听起来似乎不需要。我有点惊讶裁剪是可以的，但如果是这样，则使宽度100%可能会导致图像顶部和底部消失并不重要。这是否意味着你已经解决了问题？你将是设置你想要的co最大高度的人ntainer如果图片的高度较长，那么这些图片的高度将不会超过最大高度，而仍处于其纵横比中，您可以将容器的css最大高度设置为例如最大高度：100px，并且第二张图片的行为是正常的。请查看我对初始问题的最后评论

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