如何使用 CSS 缩放移动设备的背景图片？

Question

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

我目前正在使用以下代码对图像进行居中和修复：

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

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

我也试过background-size: auto 100%，但是没有背景图片。

问题示例，欢迎查看projectredline.org。桌面视图是我们想要的。

感谢您的帮助！

Answer 1

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

我经常使用的一个设置是这个：

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

您也可以使用例如：width: calc(100vw - 100px); 来为您想要达到的目标想出完美的比例。

Answer 2

也许 background-attachment 可以帮到你？

 html,body {
 height:100%;width:100% }    

 body {
  background: url(http://via.placeholder.com/1220x1100) no-repeat center center fixed;
  background-size: auto auto;
  background-size: 100% auto;
  margin: 0;
  padding: 0 }

@media screen and (max-width:800px) {
  body {
    background-size: cover;
    background-attachment:fixed }
}

<body>

          <div>
          
                Content
          
          </div>

</body>

如何使用 CSS 缩放移动设备的背景图片？

How can I scale background image for mobile using CSS?

css

image

background-image