html - 一致的 CSS Div 背景高度

Question

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

我有一个包含以下类的 div...

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

这在普通计算机视口(viewport)上显示得非常好，height: 57%; 属性显示了我需要的完美数量的背景图像。但是，当我将 View 更改为另一台设备时，它不会显示与最初显示的图像数量相同的图像，它只显示大约 20% 的图像。

有谁知道一种方法可以使显示的图像量保持一致，即使宽度值发生变化也是如此？

我不能使用 Jquery 或任何插件，因为该页面是 AMP 页面并根据 google 设置的 AMP 规则进行验证。

https://jsfiddle.net/pre6L7d9/1 <-- Fiddle，请查看

提前致谢。

Answer 1

正如@severinolorillajr 所说，您可以使用:

background-size:cover;

如果你想让它居中到顶部你可以使用:

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

编辑:对不起，我不能回答另一个问题，

如果你想使用像 57% 这样的 % 高度你需要设置图像position:absolute;

或者你可以使用:

height:57vh;

这样就可以了!

编辑2:

也许你需要维护图像比例，那么你需要将它设置为:

height:57vw;