燦背景圖片的最大尺寸

我有一個充滿整個頁面，與裏面它適合的背景圖像元素：燦背景圖片的最大尺寸

position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 

background: url(path/to/image.jpg); 
background-size: contain; 
background-repeat: no-repeat; 
background-position: top center;

如果圖像大於屏幕，它就會很好縮小以適應窗口。但是，如果圖像小於屏幕，則會擴大。我不希望背景圖像被擴大。

我知道我可以通過獲取圖像的大小和調整容器的CSS來解決這個問題 - 但我只是想知道是否有一個僅用於CSS的解決方案 - 就像max-background-height屬性。

來源

2014-05-09 Pickle

我不認爲沒有js是不可能的，除非你最大化元素的高度 –

你也許可以通過媒體查詢達到效果。 – jacob

@jacob - 你能舉個例子嗎？還是進一步解釋？ – Pickle

也許是這樣的：

@media only screen 
    and (min-width: 1280px /* largest size in px where you want the image to stop expanding */) { 
     background-size: 1280px 798px; 
     /* or whatever the original size of your image is */ 
    }

基本的想法就是給圖像固定大小（它的原始，最大尺寸也可以是沒有變得扭曲）每當調整過去的指定寬度的窗口。

來源

2014-05-09 02:06:37

是的，就是這樣。作爲後代的一個警告，這假設在頁面生成之前知道圖像的大小（即：動態地）。這不適用於未知尺寸的圖像。 – Pickle

燦背景圖片的最大尺寸

回答

相關問題