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

时间:2015-07-19 01:56:04

标签: html css

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

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

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

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

2 个答案:

答案 0 :(得分:0)

查看此博客: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;
}

答案 1 :(得分:0)

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

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