css - 如何将图像保留在响应式 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: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}