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

Posted 2023-03-06

【中文标题】使用 CSS 将 div 内的图像向上和/或向下缩放以适应图像的最大边

【英文标题】：Scale image inside div up AND/OR down to fit largest side of image with CSS

【发布时间】：2016-09-01 19:27:34

【问题描述】：

我在此处查看了有关该主题的大量问答，但如果存在则找不到明确的答案。

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

我已经尝试了所有我能想到的宽度、高度、最大宽度、最大高度、对象匹配等组合，但没有运气，总是至少有一个案例失败。我见过的大多数解决方案都涉及一些硬编码的最大宽度或高度值。是否有可能只使用 CSS 和动态大小的 div 容器来获得上述所有情况？

PS 我的目标浏览器是 Edge，如果这有影响的话。

谢谢！！

【问题讨论】：

我在这里添加了所有案例的示例：jsfiddle.net/rambutan2000/8rmvp8a7

所以我问这个是因为我正在制作一个简单的幻灯片，这是一个一切正常的示例（在 Edge 和 Chrome 中测试）jsfiddle.net/rambutan2000/vvsnus6o

这是一个没有背景“hack”的示例，但部分在 Edge 中工作：jsfiddle.net/rambutan2000/tu2ps0go

【参考方案1】：

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

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

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

【讨论】：

感谢 Le-roy，为了 100% 清楚，如果没有对象匹配，就无法让所有案例都在 CSS 中工作？

我什么都想不出来，我在网上也找不到其他人。可能会找到一个非标准的黑客，但如果可能的话，我会避免走那条路。

【参考方案2】：

这是一种方法。

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

【讨论】：

方案一不满足向上扩展的要求，只能向下扩展。

感谢马蒂亚斯！我已经扩展了您的示例并在 Edge 上对其进行了测试：jsfiddle.net/rambutan2000/q4kr4z1r 所有案例都有效。