縮小圖像以適應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）。