Question

我无法在多个设备上的div上保持一致的背景图像高度，我使用Chrome的DevTools根据宽度在不同设备上预览结果。让我进一步解释。

我有以下课程的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＆lt; - 小提琴，请查看

提前致谢。

Answer 1

正如@severinolorillajr所说，你可以使用：

background-size:cover;

如果你想将它居中到顶部，你可以使用：

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

编辑：对不起，我无法回答其他问题，

如果要使用％高度（如57％），则需要设置图像位置：绝对值;

或者您可以使用：

height:57vh;

那就行了！

EDIT2：

也许您需要保留图像比例，然后您需要将其设置为：

height:57vw;

Answer 2

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

Check this for other CSS Implementation

一致的CSS Div背景高度

2 个答案: