Question

我为我的一个客户制作了全屏背景图片，但问题是当我使用以下css代码使图像适合所有屏幕时：

#bg-image img{
position:fixed;
left:0;
top:0;
width:100%;
max-height: 100%;
}
#bg-image{
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}

一切都很完美，因为图像填满了我主页的所有背景，但问题是现在背景图像似乎被拉伸了，我想知道如何使我的图像大小或比例是正确的，以适应整个屏幕尺寸而不会拉伸（全质量），使背景图像的质量是完美的。

那么，如何让我的图像完全适合我的主页背景。

任何帮助都会非常受到赞赏！

Answer 1

您应该真正研究background size属性，而不是使用固定图像。使用'cover'作为背景大小意味着图像应该增长或缩小到足以覆盖整个背景。

如果您知道图像的尺寸。您可以使用媒体查询将背景大小更改为“自动”，否则会超出原始大小。

html, body {
    min-height: 100%;
}
body {
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
@media (min-width: 1120px), (min-height: 630px) {
    body { background-size: auto; }
}

Answer 2

尝试做这样的事情：

#bg-image {
position:fixed;
left:-50%;
top:-50%;
width:200%;
height: 200%;
}

#bg-image img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

这可以为您提供所需的结果，也可以在大多数浏览器中使用。

Answer 3

这应该使图像保持正确的比例：

#bg-image{
height: auto;
width: auto;
float: left;
overflow: hidden;
position: relative;
}

Answer 4

<style> 
body {
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif);
background-size: 320px 600px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>

Answer 5

由于这些问题并没有专门陈述CSS（或者不是Javascript），所以这里有一个jQuery解决方案，我已经解决并且一直在使用。我注意到移动浏览器可能存在问题。

//resize the background image
function resizeImage($selection){
    //get the ratio of the image
    var imageRatio = $selection.width() / $selection.height();

    //get the screen ratio
    var screenRatio = $(window).width() / $(window).height();

    //if the image is wider than the screen
    if(imageRatio > screenRatio){
        $selection.height($(window).height()); //set image height to screen height
        $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
    }

    //if the screen is wider than the image
    else{
        $selection.width($(window).width()); //set the image width to the screen width
        $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
    }
}

每当您想要调整图像大小时运行此选项，通常是在“onresize”和“onload”上

<body onresize="resizeImage($('#bgImage'))">

Answer 6

#bg-image{background: url(https://unsplash.com/photos/P3IJy9JMsiU/download?force=true) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

全屏背景图像被拉伸

6 个答案: