Html 全屏背景图像被拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20254538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Screen Background Image Is Stretched
提问by Hamza Abd Elwahab
I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes:
我为我的一个客户制作了全屏背景图像，但问题是当我使用以下 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;
}
Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.
一切都很完美，因为图像填充了我主页的所有背景，但问题是现在背景图像似乎被拉伸了，我想知道如何使我的图像的大小或比例正确为了适应整个屏幕尺寸而不会被拉伸（全质量），以便背景图像质量完美。
So, how to make my image to fit perfectly on the background of my home page.
那么，如何使我的图像完美地适合我主页的背景。
Any Help Would Be Very much Appreciated!
任何帮助将不胜感激！
回答by Arnold Daniels
You should really look into the background sizeproperty instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.
您应该真正研究背景大小属性，而不是使用固定图像。使用 'cover' 作为背景大小，意味着图像应该增长或缩小到足以覆盖整个背景。
If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.
如果您知道图像的尺寸。您可以使用媒体查询将背景大小更改为“自动”，否则它会超出原始大小。
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; }
}
回答by Dryden Long
Try doing something like this:
尝试做这样的事情：
#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%;
}
This should get you the results you want and work in most browsers as well.
这应该会得到你想要的结果并且在大多数浏览器中也能工作。
回答by guymid
This should keep the image the correct ratio:
这应该使图像保持正确的比例：
#bg-image{
height: auto;
width: auto;
float: left;
overflow: hidden;
position: relative;
}
回答by Adam Rifai
<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>
回答by Adam
Since the questions doesn't specifically state CSS only (or NOT Javascript), here is a jQuery solution that I've worked out and have been using. I've noticed there might be an issue with mobile browsers.
由于这些问题并没有专门说明 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
}
}
Run this whenever you want to resize the image, typically on "onresize" and "onload"
每当您想调整图像大小时运行它，通常在“onresize”和“onload”上
<body onresize="resizeImage($('#bgImage'))">
<body onresize="resizeImage($('#bgImage'))">
