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

Question

我在这里浏览了很多关于该主题的问答，但找不到确定的答案(如果存在的话)。

我有一个动态宽度和高度的 div，我想在其中放入任何大小的图像并保持纵横比。这可能是放大或缩小图像:

我已经尝试了宽度、高度、最大宽度、最大高度、对象适合度等我能想到的每一种组合，但都没有成功，总是至少有一种情况会失败。我见过的大多数解决方案都涉及一些硬编码的最大宽度或高度值。是否有可能使上述所有情况仅适用于 CSS 和动态大小的 div 容器？

PS 我的目标浏览器是 Edge，如果有区别的话。

谢谢!!

Answer 1

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

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

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