全屏背景图像被拉伸

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

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

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

任何帮助将非常感激！

你真的应该调查一下背景尺寸属性而不是使用固定图像。使用“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; }
}