Javascript 引导4-我可以'；t在div中拉伸背景图像

我正在尝试制作一个网站，它只使用屏幕空间

徽标位于页面的中上部、全宽导航栏，然后是2行3幅全宽图像，可根据分辨率进行裁剪

我的问题是，设置为col-sm-4 div背景的图像没有显示，它们的高度设置为0px（我尝试过了！重要）。代码不会对%的高度或背景大小-封面作出反应。如何使这些图像精确地显示在页面上，并且在每个分辨率上具有相同的高度

@导入url（'https://fonts.googleapis.com/css?family=Cinzel+装饰性）；
@导入url（'https://fonts.googleapis.com/css?family=Cinzel');
/*全部*/
html，正文{
身高：100%！重要；
宽度：100%！重要；
}
身体{
背景：灰色！重要；
}
标题{
身高：15%！重要；
}
.菜单{
身高：5%！重要；
}
.图像{
身高：80%！重要；
}
/*标题*/
.标志{
显示：内联块；
填充：1rem0.5rem0！重要；
}
.col-sm-4{
边框：实心1px#9f0000；
}
.图像{
}
.形象{
背景图像：url（“https://mdbootstrap.com/img/Photos/Horizontal/Nature/full 第页/img（20.jpg”）；
身高：100%；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
/*导航栏*/
导航{
字号：13pt；
字体系列：“Cinzel”，无衬线；
填充：.3rem 0.3rem 0！重要；
文本转换：大写；
}
.导航链路{
颜色：#fff！重要；
利润率：0.25%0.25%；
}
.导航链接：悬停{
字体风格：下划线；
}

地理博览会

正如Temani Afif所指出的，您没有指定任何具有特定高度的父项。在

.image

类中指定高度，而不是

100%

，即

高度：200px

您只需将本机Bootstrap 4类

img fluid

添加到图像中，如下所示：

最简单的方法是使用

.image

DIV上的

vh

单位（视口高度的%）设置最小高度

编辑：

要使图像填充剩余页面高度，不滚动，请在

容器上设置
flex grow
和溢出隐藏

.Images {
    flex-grow: 1;
    overflow-y:hidden;
}

（更新）
我的问题是我无法工作图像
您必须显示更多解释性和功能性代码。：）例如，我不理解你的问题。“因为他们的高度设置为0，我无法更改。”很抱歉，你能详细说明一下吗？你在所有高度中都使用了%，因此至少有一位家长应该有一个高度，否则他们都将保持0，看起来像这样。请不要发布重复的问题。而是编辑现有问题，并在回答问题时接受答案。谢谢您的回答，但是有没有办法不使其可滚动？要在每次分辨率更改时调整这3幅图像的高度，请单击“运行代码段”按钮，展开到整个页面，然后尝试更改窗口的大小。你想要的不是已经发生了吗？如果没有，到底应该有什么不同？我想让图像更具适应性。。。所以，当你缩小图像时，图像应该拉伸，当你放大图像时，图像也应该放大，但我不想让页面可滚动。。。我希望是这样
.Images {
    flex-grow: 1;
    overflow-y:hidden;
}