Html 在一个容器中以3个div调整图像大小

我正在为家庭作业/实验室作业制作这个网页，我遇到了这个问题

我希望我的3舱在一个集装箱舱内的间隔和顺序正确。我希望左、右两个div的宽度更小，但与中间div的高度相同。中间div的宽度比左、右div的宽，但高度相同。左侧和右侧的div中都有图像。所以本质上，我想在中间部分的两侧做广告，中间部分是主要内容

问题是，这些图像（非常大的屏幕截图）没有像广告一样在左右两个分区中对齐和匹配。这些图像是在彼此的顶部对齐的，而不是在左右两侧对齐的

如何修复此问题，使网页响应并放置到所需位置？CSS解决方案优先

链接到正在进行的网页：

#cntnt{
最大宽度：100%；
高度：自动；
保证金：0自动；
显示器：flex；
背景色：浅绿色；
}
#左侧边栏{
背景色：红色；
最大宽度：33.33%；
高度：自动；
位置：静态；
浮动：左；
保证金：自动；
}
#右侧边栏{
背景颜色：紫色；
最大宽度：33.33%；
高度：自动；
位置：静态；
浮动：对；
保证金：自动；
}
#中庸的{
显示：块；
宽度：33.33%；
高度：自动；
位置：静态；
浮动：无；
保证金：自动；
}

目前正在建设中。请耐心等待期末考试
产品非常感谢。

尝试从CSS中删除

边距：auto

。然后在

之后添加
width=“100%”height=“100%”
。这样，我们告诉
img
到“fit”它在容器上的高度和宽度

我修改您的代码：

HTML

将宽度和高度设置为默认值，并从代码中删除边距。
您的示例很好，但我的网页却不行。这些图像经过div并相互重叠。您的图像太大。试着给他们一个较小的尺寸，例如
宽度：200px
它可以工作，但我希望网页能够响应。因此，我希望当用户调整窗口大小或使用移动设备时，图像可以放大或缩小。谢谢您的回复。你的答案接近我想要的网页外观。不过，解决方案的问题是，3个div都在“cntnt”div内向左浮动，而不是固定在其左、中、右位置的3个div。另外，中间的div很可能会被文本填充。不是图像。实际上，当您使用
flex
作为显示属性时，
float
将被忽略。请仔细阅读以下答案：祝您好运！
<div id="cntnt">
  <div id="leftSideBar">
    <!--Techteach.us/Mrs. Ramirez's website-->
    <img width="100%" height="100%" src="http://techteach.us/Web2020/ZWeiJian/Visual%20Content/Teachteach.us.png" alt="An ad of Techteach.us, the parent site of all Web2020 sites." id="leftPic">
  </div>

  <div id="midContent">
    <img width="100%" height="100%" src="http://ysgolllandinamschool.co.uk/Images/under_construction.jpg" alt="An ad of Informational Technology High School, a High School." id="rightPic">

  </div>

  <div id="rightSideBar">
    <!--ITHS' website-->
    <img width="100%" height="100%" src="http://techteach.us/Web2020/ZWeiJian/Visual%20Content/ITHS.net.png" alt="An ad of Informational Technology High School, a High School." id="rightPic">
  </div>
  <br style="clear: left;" />
</div>

<br>

/**page contents**/
#cntnt {
max-width: 100%;
height: 100%;
/* margin: 0 0; */
display: flex;
background-color: aqua;
}

#leftSideBar {
background-color: red;
max-width: 15%;
height: auto;
position: static;
float: left;
/* margin: auto; */
}

#rightSideBar {
background-color: purple;
max-width: 15%;
height: auto;
position: static;
float: right;
/* margin: auto; */
}

#midContent {
display: block;
width: 70%;
height: auto;
position: static;
float: none;
/* margin: auto; */
}