Html 如何使背景图像调整到屏幕大小？

我已经创建了导航和一个有背景图像的部分，我希望它能够自动调整到屏幕大小，但是，它没有正确调整，

背景图像的大小几乎保持不变。有没有办法解决这个问题

看起来正常吗

调整浏览器窗口大小时的外观


“吞食”标志不完全可见。
请不要介意导航，我稍后会解决的

链接到IMG-


/*概述*/
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景：黑色；
}
.集装箱{
最大宽度：1500px；
保证金：0自动；
}
img{
最大宽度：100%；
高度：自动；
}
/*标题和导航*/
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：rgb（7,7,7）；
不透明度：80%；
左：15em；
右：12em；
位置：固定；
排名：0；
z指数：999；
宽度：100%；
}
标题：悬停，
标题：焦点{
不透明度：100%；
变换：比例（1.05）；；
过渡：1s轻松；
}
标题：非（：悬停）{
不透明度：80%；
变换：比例（1）；
过渡：1s轻松；
}
李国荣{
显示：内联块；
}
.导航项目优先{
颜色：#da2424；
文字装饰：下划线；
}
海军ulli a{
颜色：白色；
文字装饰：无；
字体系列：“Londrina Solid”，无衬线；
字体大小：1.7em；
边缘：1米；
}
导航ulli a：悬停{
颜色：#da2424；
文字装饰：下划线；
}
/*第一节*/
.主要部分{
背景图片：url（'../IMG/main-section-logo.jpg'）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
高度：80vh；
边框底部：1px实心rgb（15,13,13）；
边框顶部：1px实心rgb（15,13,13）；
}
.主要部分.按钮容器{
身高：90%；
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
}







试试这个

img {
  width: 100%;
  height: auto;
}

或阅读本页，可用于：


用这个

img {
 width: 100%;
}

提示：

使用高度根本不是一个好的选择。尽量避免这种情况。
如果希望页面内容的高度/宽度具有响应性，则在处理页面内容的高度/宽度时需要指定一个百分比，因为添加一个百分比意味着大小不会是静态的，并且会响应浏览器窗口/屏幕的大小

在你的CSS中试试这个

img {
 width: 100%;
}

所以事情是这样的。。。下面的代码回答了您之前的问题，但我认为它不能解决您的问题

.main-section {
    background: url('main-section-logo.jpg') no-repeat center bottom;
    background-size: 100vw;
    height: 80vh;
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}

我相信你想要的是。。阅读评论。。详细解释如下


。主要部分{
/*全屏背景图像“背景火灾”*/
背景：url（'bg-img.jpg'）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
/*此部分的高度为视口高度的100%*/
高度：100vh；
/*边界*/
边框底部：1px实心rgb（15,13,13）；
边框顶部：1px实心rgb（15,13,13）；
/*将项目“容器”与页面中心对齐*/
显示：网格；
放置项目：中心；
文本对齐：居中；
}

您好，非常感谢您的回复。我已经在CSS中将它添加到我的IMG中，但不幸的是，背景图像（“吞食”）看起来仍然一样，嗨，这可能是因为您对图像使用了以下语法：
width=110px>
。将其移除并替换为
style=“width:100%”“
您好，非常感谢您的回复。我已经在CSS中将其添加到我的IMG中，但不幸的是，背景图像（“吞食”）看起来仍然一样。关于高度，你还有什么其他的选择可以推荐给我吗？两个都试过，最大宽度：100%；（默认设置）且宽度为100%；，但是它不起作用。看看这是否有助于img选择器不会对背景图像产生任何影响。它的大小现在由主部分控制。主部分的大小以及它在容器中的行为由背景控制。我认为你身上的高度很好。主部分很好，只是要知道它只覆盖了视口高度的80%，这使得图像的宽度可以解释，因为大小在封面上，意味着一旦它覆盖了那80vh它完成了它的工作谢谢你，我尝试了一些这些技巧，不幸的是，只有“吞食”标志一直有这个问题。。它仍然不是完全可见的。所以css技巧只有在你不关心图像宽度的情况下才有效。然而，你会这样做，所以你可能会想使用100vw（或任何你想要的）作为背景图像的大小，而不是覆盖你的屏幕。然后将其放置在中间底部，以便从底部保持火焰效果。然后将背景色设置为黑色，使图像保持不变，但当图像从上到下运行时，整个屏幕为黑色。这有意义吗？当我回到家的时候，我可以举个例子是的，那将是最好的，因为我还在努力：D谢谢你，我编辑了我的帖子，并添加了一个链接到我正在使用的图片。
.main-section {
    background: url('main-section-logo.jpg') no-repeat center bottom;
    background-size: 100vw;
    height: 80vh;
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}