全屏背景图像被拉伸

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

您应该真正研究背景大小属性而不是使用固定图像.使用'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; }
}