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

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的解决方案：

• https://github.com/gutierrezalex/photo-resize
• How to resize an image to fit in the browser window?

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

Answer 1

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

将其应用于img而非元素背景图像。背景图片不支持最大宽度高度的浏览器。你可以使用背景大小设置为100％100％，但我建议使用img以获得更好的CSS控制和可访问性。

Answer 2

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