一致的CSS Div背景高度

我無法在多個設備上的div上保持一致的背景圖像高度，我使用Chrome的DevTools根據寬度在不同設備上預覽結果。讓我進一步解釋。一致的CSS Div背景高度

我有下面的類股利...

.header-image { 
     width: 100%; 
     height: 57%; 
     background: url('img/fruit-water.jpg') lightgrey; 
     background-size: 100%; 
     display: block; 
}

這顯示在正常的電腦視窗完美精緻，height: 57%;屬性顯示我需要的背景圖像的完美量。但是，當我將視圖更改爲另一個設備時，它不顯示與最初所做的圖像相同的數量，它只顯示約20％的圖像。

有誰知道一種方法來保持圖像的顯示量一致，即使寬度值改變？

我無法使用Jquery或任何插件，因爲該頁面是AMP頁面，並根據由Google設置的AMP規則進行驗證。

https://jsfiddle.net/pre6L7d9/1 < - 小提琴，請看看它提前

感謝。

來源

2016-04-21 Kenziiee Flavius

您可以加入一些截圖或者擺弄？如果您使用「background-size：cover」而不是？ –

添加小提琴！ –

爲@severinolorillajr說，你可以使用：

background-size:cover;

，如果你想將它點到上，你可以使用：

background-size: cover; 
background-position:50% 0%;

編輯：對不起，我無法回答其他問題，

如果你想使用57％的高度，你需要設置圖像的位置：絕對;

或者你可以使用：

height:57vh;

這將這樣的伎倆！

EDIT2：

也許你需要十個分量圖像比例，那麼你需要將其設置爲：

height:57vw;

來源

2016-04-21 09:16:36

使用位置絕對拋出頁面中的所有其他內容在重擊 –

與高度：57vw;你不需要絕對的位置！有你更新的小提琴https://jsfiddle.net/pre6L7d9/2/ –

謝謝你，這似乎已經奏效，你能向我解釋vw嗎？ –

.header-image { 
    background: url('img/fruit-water.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

Check this for other CSS Implementation

來源

2016-04-21 08:58:04

由於某種原因，現在除去div中的div，除非div框填充 –

雖然這是一個正確的答案，請注意，本css-tricks文章來自** 2010 **。 'background-size'不再需要供應商前綴。 – Demnogonis

@KenziieeFlavius嘗試在''標籤上添加背景...... RIght感謝您爲此帶來了@Demnogonis .. –

一致的CSS Div背景高度

回答

相關問題