將不同尺寸的圖像完全適合到相同大小的div中

Question

這很奇怪，因為我無法控制很多方面。 我正在使用自定義圖像輪播，其中圖像是背景圖像，並且包含的​​div具有設置的寬度和高度（無法更改），但是我可以操縱諸如background-position和background-size之類的東西。

問題來自於寬高比不同的圖像。 如果我只是嘗試操縱寬度和高度，則圖像會被裁剪。 嘗試類似的東西：

background-size: 100%

將適用於較寬的圖像，而：

background-size: auto 100%

適用於更高的圖像。

background-size: cover

裁剪大小和完美的世界中，我想找到一個僅CSS的解決方案。 是否有人對如何使兩個寬高比的圖像完全適合相同大小的div有任何想法？

Answer 1

您正在尋找contain值 ：

包含

此關鍵字指定背景圖像應縮放為盡可能大，同時確保其尺寸均小於或等於背景定位區域的相應尺寸。

 body > div { height: 500px; width: 500px; } .tall { background: #F00 url(http://www.placehold.it/500X1000) center no-repeat; background-size: contain; } .wide { background: #F90 url(http://www.placehold.it/1000X500) center no-repeat; background-size: contain; } 

 <h2>I contain a tall image!</h2> <div class="tall"></div> <h2>I contain a wide image!</h2> <div class="wide"></div>