Question

嘿所以我有一堆库存图片，我正在加载作为我网站主页的背景图片。

问题在于它们中很少有分辨率在1024 x 768左右，很少有像1920 x 1024这样的高分辨率。

现在如何根据用户屏幕的分辨率缩小或拉伸墙纸？

我尝试使用background-image：cover但是我在低分辨率屏幕上加载高分辨率图像，只有部分图像在屏幕上可见。但是在低分辨率图像被加载到高分辨率屏幕的情况下，它可以完美地工作。

Answer 1

查看此博客：https://css-tricks.com/perfect-full-page-background-image/ - 它应该为您提供所需的所有信息。

这是关键的css：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

这会缩小或拉伸你的形象：

body {
    background: url(image.jpg) no-repeat center center fixed;
    background-size: 100%;
}

如何在css中自动拉伸或缩小背景图像？

2 个答案: