全屏背景图像被拉伸答案

【问题标题】：Full Screen Background Image Is Stretched全屏背景图像被拉伸
【发布时间】：2013-11-27 22:44:24
【问题描述】：

我为我的一个客户制作了全屏背景图片，但问题是当我使用以下 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;
}

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

那么，如何使我的图像完美地适合我的主页背景。

非常感谢任何帮助！

【问题讨论】：

这里有一些不错的选择，甚至有一些在 IE8 中可以使用。虽然 background-size 很棒而且很简单，但 IE8 不支持它。如果这不是一个因素，那么不要担心。 css-tricks.com/perfect-full-page-background-image

标签： html image css photoshop

【解决方案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; }
}

【讨论】：

背景显示正确，但问题是图像看起来很拉伸，我希望它以高质量显示并适合整个屏幕（比如不滚动），这非常重要对我来说。我不知道是否可以使用 css 3 或通过调整图像大小以显示完整质量来实现这一点。
这绝对是要走的路，只是不要忘记 IE8 不支持background-size，所以你可能会冷落一小部分用户。
问题是图像在我的网站上仍然被拉伸，我希望它看起来 100% 的质量。你可以在这里看到leydenlewis.com
@HamzaAbdElwahab 你的意思是你不希望图像增长。换句话说，它应该是最大 1120px x 630px？
您需要在媒体查询中添加body {background-size: auto;} 来代替您那里的内容。

【解决方案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%;
}

这应该会为您提供您想要的结果，并且在大多数浏览器中也可以使用。

【讨论】：

不幸的是，这已经裁剪了我的图像是顶部和底部，所以不是所有的图像现在都出现了。我希望我的图像 100% 出现在我的主页上，但我不希望它看起来拉伸。这是我网站的链接leydenlewis.com
尝试此链接中的一种方法，看看它们是否适合您：css-tricks.com/perfect-full-page-background-image
@HamzaAbdElwahab 另外，如果您希望背景图像保持其纵横比并填满整个屏幕而不管屏幕大小，您将不得不在某个时候裁剪图像。
我应该如何裁剪图像，我的意思是宽度或高度？或者尺寸应该是多少？如果可能的话，我很想让背景图像在所有屏幕尺寸上都保持完美的纵横比，这会很棒！
这就是我上面的回答为您所做的。它会自动裁剪图像以保持其纵横比并同时填满整个屏幕。

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

虽然此代码可能有助于解决问题，但仅代码的答案质量不高。更好的答案可以说明代码的作用，解释采用该方法的原因，显示代码的插入位置以及相关文档的链接。

【解决方案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'))">

【讨论】：

【解决方案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;}

【讨论】：

请说明您是如何解决问题的
欢迎来到 Stack Overflow。在为一个六年前的问题添加一个已接受答案和五个现有答案的答案时，指出您的答案所针对的问题的哪些新方面非常重要。通常可以通过添加对它们如何工作以及为什么工作的解释来改进仅代码的答案。考虑到当前浏览器中此 CSS 规则的覆盖范围，为什么在这种情况下您要包含这么多浏览器特定版本的规则。我刚查了caniuse.com/…，好像有强力支持。