CSS：響應背景圖像高度

我使用這個CSS：CSS：響應背景圖像高度

.wrap { 
    max-width:1400px; 
    min-width:768px; 
    width:100%; 
    background-repeat: no-repeat scroll; 
    background-position: center top; 
    position: relative; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.image { 
    width: 100%; 
    height: 600px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

要居中的圖像和規模根據窗口大小，在768px停止縮放。當窗口尺寸較大時，我無法顯示圖像的底部（當窗口最小化時它可以正常工作）。當我改變.image類的高度超過600px的，它打破了圖像縮放...

這裏的問題的演示： http://jrbaldwin.com/css_issue/

來源

2013-12-13 alyx

嘗試'背景位置：中心中心;背景重複：不重複; background-size：contains;'.image'類和'min-width：100％;''.wrap'類 - 在FF中查看我的權利。 –

我認爲這是不結垢，因爲高度是保持固定。例如，將.image高度設置爲1000px。它必須放大圖像以覆蓋1000px，因此無論圖像的寬度如何，它始終填充整個1000像素的高度。

可能嘗試：

背景尺寸：100％; background-repeat：no-repeat;

來源

2013-12-13 20:23:05 jtlowe

建立在@ jtlowe的答案上，難道你不能通過使用background-size: contain來取得正確的效果嗎？

由於您已經牢固地位於CSS3域中，因此您可以選擇在較小尺寸的窗口中創建使用cover的媒體查詢。

來源

2013-12-13 20:26:34 Lasse

是的，但一旦寬度足以「包含」圖像，圖像可能不再放大。 – jtlowe

雖然這可能不是問題，因爲容器的寬度最大寬度爲1400px; – jtlowe

@jtlowe：的確，我的想法確切！ – Lasse

使用background-size：包含而不是封面。

來源

2013-12-13 20:27:15

嘗試這個風格：

.image{ 
    width: 100%; 
    height: 600px; 
    max-height: 1000px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center center; 
    max-height: 1000px; 
}

主要的想法是使用「遏制」屬性
的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

來源

2013-12-13 20:30:10

CSS：響應背景圖像高度

回答

相關問題