在div内向上缩放图像和/或向下以使用CSS适合图像的最大边

Question

我已经在这个主题上看了很多关于Q＆amp; A的内容，但是如果有的话，我找不到明确的答案。

我有动态宽度和高度的div，想要在其中放置任何尺寸的图像并保持纵横比。这可能是向上或向下缩放图像：

我已尝试过宽度，高度，最大宽度，最大高度，物体贴合等各种组合。我可以想到没有运气，至少有一个案例失败了。我见过的大多数解决方案都涉及一些硬编码的最大宽度或高度值。是否有可能让所有上述案例仅使用CSS和动态大小的div容器？

PS我的目标浏览器是Edge，如果这会产生影响。

谢谢！

Answer 1

对于除 Edge之外的所有现代浏览器以及所有版本的Internet Explorer，您都可以使用CSS属性object-fit。

示例： https://jsfiddle.net/09cpe9e0/1/

我倾向于为Internet Explorer和Edge实现一个可以在以后删除的javascript解决方案，只有在安全的情况下才会留下CSS版本。

Answer 2

这是一种方法。

使用background: url(path/to/image)将图片应用为css背景，然后使用background-size属性将缩放设置为包含background-size: contain（请参见小提琴，https://jsfiddle.net/mghgsk5e/）。< / p>