全屏背景图像被拉伸 [英] Full Screen Background Image Is Stretched

问题描述

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

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:

#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!

推荐答案

您应该真正查看 background size 属性，而不使用固定图像.使用"cover"作为背景大小，意味着图像应该增长或缩小到足以覆盖整个背景的程度.

You should really look into the background size property 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.

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

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; }
}

这篇关于全屏背景图像被拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！