css - 如何使用 CSS 为移动设备缩放背景图像？

Question

我正在尝试缩放移动设备上的背景图像，以便将高度重新缩放为设备高度的 100%，并根据需要裁剪宽度以保持纵横比。

我目前正在使用以下代码来居中和修复图像:

background: url(redlineNoText.jpg) no-repeat center center fixed;

我试过使用 background-size: cover，但它会生成一个非常大的图像，只有一小部分在移动浏览器上可见。

我也尝试过 background-size: auto 100%，但结果没有背景图像。

问题示例，欢迎查看projectredline.org .桌面 View 是我们的目标。

感谢您的帮助!

Answer 1

视口(viewport)高度使用单位 VH，视口(viewport)宽度使用单位 VW。

例如，我经常使用的一个设置是:

width: 100vw;
height: 100vh;
background: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;

您还可以使用例如:width: calc(100vw - 100px); 来为您想要实现的目标提供完美的比例。