Question

我有几张尺寸变化很大的图像。有些图像可能小到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的解决方案。

Answer 1

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

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

Answer 2

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

缩小图像以适合div，但从不放大

2 个答案: