如何将图像保留在他们的响应式 div 中

Question

当我更改浏览器大小时，如何保持其响应式div中包含的两个图像？

.entry-header{
display:none;
}
#masthead{
height:12vw;
}
html{
height:55vw;
}
body{
height:53vw;
margin-top:2vw;
}
#page{
height:51.5vw;
/*border:solid 2px black;*/
}
#vision-table{
display:table;
margin:1.3509375vw 0;
/*  border:solid 2px black; */
}
#vision{
background-color:#538231c7;
color:white;
height:3.71385vw;
padding:1.00215vw 2.01vw;
line-height:1.25;
font-size:1.5vw;
display:table-cell;
vertical-align:middle;
}
.row{
display: flex; /* equal height of the children */
justify-content:space-between;
/* border:solid 2px black;*/
}
.col{
/*flex:1; /* additionally, equal width */
width:32%;
background-color:#b3d7f8;
/* border:solid 2px black;*/
}
.col3{
height:6.67vw;
/*border:solid 2px black;*/
}
.top{
height:3.64vw;
/* border:solid 2px black;*/ 
}
.pic{
height:11.535vw;

border:solid 1px black;

}
.text{
height:8.5vw;
/*border:solid 2px black; */
}
.read{
height:6.67vw;
/*  border:solid 2px black; */
}
#footer{
text-align:center;
}

.top h1{
font-size:1.6vw;
color:#538232;
text-align:center;
}
.wp-block-image {
line-height: 0;
max-width: 100%;
margin: 0;
text-align:center;

}
img{
width:21vw;
}
figure{
background-size:contain;
}
.pic{
background-size:contain;
}
@media only screen and (max-width: 1110px) {
#masthead{
height:16vw;
}
img{
width:28.639vw;
}

}

<div id="vision-table">
<div id="vision">Our Vision: A sustainable and healthy town of Weston, with engaged citizens committed to a thriving community, today and in the future.</div>
</div>
<div class="row">
<div id="col1" class="col">
<div class="top">
<h1>Feature Highlight</h1>
</div>
<div class="pic">
<figure class="wp-block-image">
<img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/Gas-Leak-Infographic--e1566766035812.png"></figure>
</div>
<div class="text"></div>
<div class="read"></div>
</div>
<div id="col2" class="col">
<div class="top">
<h1>Feature Action</h1>
</div>
<div class="pic">
<figure class="wp-block-image">
<img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/60805048_10217029527561784_8914643229203234816_n-1-e1566764730232.jpg"></figure>
</div>
<div class="text"></div>
<div class="read"></div>
</div>
<div id="col3" class="col">
<div class="col3 top">
<h1>Get Involved</h1>
</div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
</div>
</div>

Answer 1

尝试使用图像，以确保图像永远不会越过其容器

.wp-block-image img {
max-width: 100%;
width: auto9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}