Html 为什么不是'；我的形象是否对尺寸有反应，但其他一切都有反应？

我正在为我的IT课程做一个项目。我很难让网站响应。 我的logo和导航栏看起来都很有反应，但是房子的形象似乎没有反应。（上面的链接是90%缩放）

我曾尝试编辑宽度和高度的大小，但由于我对它非常陌生，我正在努力解决这个问题

我想顶部的图像是响应。我该怎么做

@charset“utf-8”；
/*CSS文档*/
身体{
边际：0px；
}
/*这是容器css*/
.集装箱{
左边距：200px；
右边距：200px；
边际上限：0；
框大小：边框框；
}
.标志{
位置：相对位置；
显示：内联块；
}
.标志h1{
边缘顶部：20px；
页边距底部：0；
颜色：#232323；
字体系列：Consolas，“Andale Mono”，“Lucida Console”，“Lucida Sans打字机”，摩纳哥，“Courier New”，“monospace”；
}
navbar先生{
浮动：对；
排名：0；
填充：10px；
}
.导航栏ul a：悬停{
填充物：5px；
保证金：0；
背景颜色：浅蓝色；
}
李国宝先生{
显示：内联块；
文字装饰：无；
填充：10px；
颜色：黑色；
字体系列：Consolas，“Andale Mono”，“Lucida Console”，“Lucida Sans打字机”，摩纳哥，“Courier New”，“monospace”；
}
/*这是最上面的图像css*/
#顶img{
背景图片：url（“images/top img.jpg”）；
背景位置：中心；
最小宽度：100%；
高度：500px；
位置：相对位置；
背景重复：无重复；
边框底部：实心#3e3e3px；
}
/*这是@media，我正试图使顶级图像具有响应性*/
@媒体屏幕和屏幕（最小宽度：40em）{
#顶img{
最大宽度：50em；
}
}
@媒体屏幕和屏幕（最小宽度：64em）{
#顶img{
最大宽度：70em；
}
}

植物景观
植物景观

您使用图像作为背景，而不是HTML元素。您已经告诉您的

#top img

元素要有响应，但您没有告诉背景要有响应。尝试将以下声明添加到CSS中：

 #top-img {
     ...
     background-size: cover;
 }

---

尝试为您的

顶级img

类添加

背景尺寸：封面

，以适应页面的整个宽度

@charset“utf-8”；
/*CSS文档*/
* {
框大小：边框框；
}
身体{
边际：0px；
}
/*这是容器css*/
.集装箱{
左边距：200px；
右边距：200px；
边际上限：0；
框大小：边框框；
}
.标志{
位置：相对位置；
显示：内联块；
}
.标志h1{
边缘顶部：20px；
页边距底部：0；
颜色：#232323；
字体系列：Consolas，“Andale Mono”，“Lucida Console”，“Lucida Sans打字机”，摩纳哥，“Courier New”，“monospace”；
}
navbar先生{
浮动：对；
排名：0；
填充：10px；
}
.导航栏ul a：悬停{
填充物：5px；
保证金：0；
背景颜色：浅蓝色；
}
李国宝先生{
显示：内联块；
文字装饰：无；
填充：10px；
颜色：黑色；
字体系列：Consolas，“Andale Mono”，“Lucida Console”，“Lucida Sans打字机”，摩纳哥，“Courier New”，“monospace”；
}
/*这是最上面的图像css*/
#顶img{
背景图像：url（“https://via.placeholder.com/1200x400");
背景位置：中心；
背景尺寸：封面；
最小宽度：100%；
高度：500px；
位置：相对位置；
背景重复：无重复；
边框底部：实心#3e3e3px；
}
/*这是@media，我正试图使顶级图像具有响应性*/
@媒体屏幕和屏幕（最小宽度：40em）{
#顶img{
最大宽度：50em；
}
}
@媒体屏幕和屏幕（最小宽度：64em）{
#顶img{
最大宽度：70em；
}
}

植物景观

我检查了您的代码，发现您正在使用房屋图像作为背景图像，因此我的建议是请使用css属性background size:cove作为您的类名#top img，并在制作移动响应布局时删除高度，此时请提及高度：auto

suggested css{

#top-img {
   float:left;
   width:100%;
   background-image: url("images/top-img.jpg");
    background-position: center;
    min-width: 100%;
    height: 500px;
    position: relative;
    background-repeat: no-repeat;
    border-bottom: solid #3E3E3E 3px;
    background-size:cove;
}

---

令人惊叹的！非常感谢，下次我会记住这一点。