嘿所以我有一堆库存图片,我正在加载作为我网站主页的背景图片。
问题在于它们中很少有分辨率在1024 x 768左右,很少有像1920 x 1024这样的高分辨率。
现在如何根据用户屏幕的分辨率缩小或拉伸墙纸?
我尝试使用background-image:cover但是我在低分辨率屏幕上加载高分辨率图像,只有部分图像在屏幕上可见。但是在低分辨率图像被加载到高分辨率屏幕的情况下,它可以完美地工作。
答案 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%;
}