缩小图像以适应 div，但从不放大答案

【问题标题】：Scale down image to fit into div, but never scale up缩小图像以适应 div，但从不放大
【发布时间】：2014-01-29 21:56:17
【问题描述】：

我有几张尺寸非常不同的图片。一些图像可能小至 50x100，而其他图像可能大至 4000x4000。

我想以原始尺寸（永远不会更大）显示这些图像，或者缩小到刚好适合浏览器窗口的大小。

使用背景图像属性，我已经让图像始终适合浏览器，但如果浏览器大于图像，我无法阻止它们放大：

 <div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>

.slide-pane {
    background-repeat: no-repeat;
    background-size:auto;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    height: 80%;
    width: 80%;
}

我找到了这些 Javascript/Jquery 解决方案：

但我希望有一些纯 CSS 的解决方案。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

max-height:100%;
max-width:100%;
height:auto;

将其应用于img 而不是元素背景图像。背景图像对最大宽度高度没有完整的浏览器支持。您可以将 background-size 设置为 100% 100%，但我建议使用 img 以获得更好的 CSS 控制和可访问性。

【讨论】：

【解决方案2】：

如果它们是内容图像（而不是用于样式），那么您最好在页面中使用 <img> 元素。如果你这样做了，那么你可以在你的 CSS 中给它img { max-width: 100%; }。这具有在 IE8 中工作的额外好处（与 background-size 不同）。

【讨论】：