如何讓背景圖片縮小以適應其元素，但不能放大？

我有一個背景圖像的div是未知的大小。它可以是16px高，它可以是1600px，以及其間的任何東西。那裏有一個大約440px寬和250px高的背景圖片。如何讓背景圖片縮小以適應其元素，但不能放大？

當div高於250像素時，背景圖像不會縮放。這是理想的行爲。到現在爲止還挺好。

如果div的高度低於250像素，則剪切背景圖像。這是不需要的：我希望它能夠縮放到div的較小高度。

如何使用css（或者，如果不可能的話，js）在不適合其div的情況下縮小背景圖像的尺寸，但在div大於自身時從不縮放？本質上，我想使用background-size: contain;，但最大設置爲圖像的高度。

我試過各種封面和包含，但沒有任何效果。

This question也沒有幫助，因爲我無法在div上設置最大高度。它包含網站編輯添加的內容。如果這很多，它必須顯示。

這裏有一個小提琴：http://jsfiddle.net/Bakabaka/2zetkrg0/

來源

2015-06-05 Bakabaka

你能表現出一定的代碼示例。我瞭解您的請求，但發現很難在沒有看到/代碼示例的情況下找到解決方案。歡呼 – Martin

我懷疑也許你將不得不包含它自己的元素/ div的背景圖像，並在CSS中設置該元素作爲一個最大尺寸或正在'background-size：contains;' – Martin

是簡單地插入你想給一個背景的選項裏面的元素的img？

您可以在圖像上使用max-width:100%; max-height:100%;，因此它不會超過容器尺寸，但仍將保持其縱橫比，並且不會比原尺寸增大。接下來，您可以絕對定位圖片並給它z-index:-1，這樣它會在所有內容的後面，並且不會受到它的影響。最後，如果您希望它在其容器中居中，請提供圖像top:50%; left:50%; transform:translate(50%,50%);。

這裏有一個演示：https://jsfiddle.net/ilpo/9dnqd6bc/1/

你甚至可以設置min-width和min-height，如果你想有背景的最小尺寸。

來源

2015-06-05 12:10:17

這將是我的後備，如果它事實證明它不適用於純CSS。謝謝！ – Bakabaka

我確實嘗試過'div :: before {content：url（background.jpg）;'第一次，但不幸我找不到控制尺寸的方法。 –

試試這個，希望能對大家的工作:)

container{ 
    background-image: url("/assets/pic.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    max-height:250px; 
}

來源

2015-09-29 13:20:10 CreativePS

如何讓背景圖片縮小以適應其元素，但不能放大？

回答

相關問題