将 div 内的图像向上 AND/OR 缩放以适应图像的最大边 CSS
Scale image inside div up AND/OR down to fit largest side of image with CSS
我在这里浏览了很多关于该主题的问答，但找不到确定的答案（如果有的话）。
我有一个 div 的动态宽度和高度，我想在其中放入任何大小的图像并保持纵横比。这可能是放大或缩小图像：
我已经尝试了宽度、高度、最大宽度、最大高度、对象适合等我能想到的每一种组合，但没有成功，总是至少有一个失败的案例。我见过的大多数解决方案都涉及一些硬编码的最大宽度或高度值。是否有可能使上述所有情况仅适用于 CSS 和动态大小的 div 容器？
PS 我的目标浏览器是 Edge，如果有区别的话。
谢谢！！
这是一种方法。
使用 background: url(path/to/image) 将图像应用为 css 背景，然后使用 background-size 属性设置缩放以包含 background-size: contain（参见 fiddle, https://jsfiddle.net/mghgsk5e/).
对于所有现代浏览器 除了 Edge 和所有版本的 Internet Explorer，您可以使用 CSS 属性 object-fit.
示例：
https://jsfiddle.net/09cpe9e0/1/
我倾向于为 Internet Explorer 和 Edge 实施 javascript 解决方案，以后可以删除该解决方案，在安全的情况下只留下 CSS 版本。
我在这里浏览了很多关于该主题的问答，但找不到确定的答案（如果有的话）。
我有一个 div 的动态宽度和高度，我想在其中放入任何大小的图像并保持纵横比。这可能是放大或缩小图像：
我已经尝试了宽度、高度、最大宽度、最大高度、对象适合等我能想到的每一种组合，但没有成功，总是至少有一个失败的案例。我见过的大多数解决方案都涉及一些硬编码的最大宽度或高度值。是否有可能使上述所有情况仅适用于 CSS 和动态大小的 div 容器？
PS 我的目标浏览器是 Edge，如果有区别的话。
谢谢！！
这是一种方法。
使用 background: url(path/to/image) 将图像应用为 css 背景，然后使用 background-size 属性设置缩放以包含 background-size: contain（参见 fiddle, https://jsfiddle.net/mghgsk5e/).
对于所有现代浏览器 除了 Edge 和所有版本的 Internet Explorer，您可以使用 CSS 属性 object-fit.
示例： https://jsfiddle.net/09cpe9e0/1/
我倾向于为 Internet Explorer 和 Edge 实施 javascript 解决方案，以后可以删除该解决方案，在安全的情况下只留下 CSS 版本。