一致的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背景高度

回答

相关问题