Html 标题图像与背景：cover；重复；。我怎样才能解决这个问题？

我的目标是创建一个面包店网站，因此标题和图像，该网站将不会发布到任何服务器。我希望在我的页面顶部有一个导航菜单下的图像，当我调整窗口大小时，它保持相同的纵横比，但它要求没有高度规格，否则当我放大窗口时图像将被裁剪，并水平重复。以下是我目前掌握的代码：

window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

.header img{
高度：370px；
宽度：100%；
背景重复：无重复；
背景：url（'https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
背景尺寸：包含；
}
身体{
背景色：白色；
保证金：0；
填充：0；
文本对齐：居中；
}          
.粘性+.内容{
填充顶部：60px；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.菜单{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#000000；
}
李先生{
浮动：左；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
}
利纳姆先生{
浮动：左；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字号：26px
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：16px；
文字装饰：无；
}
身体{
保证金：0；
文本对齐：居中；
}

您需要在css中设置背景大小，如下所示

可以使用“背景位置”属性更改图像的位置

进一步资料：

window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

.header img{
高度：370px；
宽度：100%；
背景重复：无重复；
背景：url（'https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
背景尺寸：封面；
}
身体{
背景色：白色；
保证金：0；
填充：0；
文本对齐：居中；
}          
.粘性+.内容{
填充顶部：60px；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.菜单{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#000000；
}
李先生{
浮动：左；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
}
利纳姆先生{
浮动：左；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字号：26px
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：16px；
文字装饰：无；
}
身体{
保证金：0；
文本对齐：居中；
}

但是，如果全屏显示该片段，您将看到图像已被裁剪。我试图让图像保持其高宽比，这样就不会出现裁剪。据我所知，这意味着没有设置高度，我试着将高度设置为自动，但图像消失了。真的。如果需要固定高度，可以更改位置。否则，您应该首先使用常规图像（宽度：100%，高度：自动）。