如何使用CSS缩放移动背景图像？-Java 学习之路

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

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

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

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

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

有关问题的示例，请随时查看projectredline.org . 桌面视图是我们的目标 .

谢谢你的帮助！

2 回答

0
将单位VH用于视口高度，将VW用于视口宽度 .

我经常使用的一个设置就是这个：
```
width: 100vw;
height: 100vh;
background: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
```
你也可以使用例如： width: calc(100vw - 100px); 为你想要达到的目标提供完美的比例 .
回复于 2024-04-17T07:19:01+08:00

也许 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>

回复于 2024-04-17T07:19:01+08:00

如何使用CSS缩放移动背景图像？

2 回答

相关问题