html - 如何让 flex 元素图像缩小而不离开页面

Question

下面有图标，当屏幕缩小时，这些图标会溢出页面。我试过设置中间宽度 100% 和其他技术，但没有任何效果。我怎样才能让这些 flex 元素图像缩小而不离开页面？

.container3 {
  background-color: #e0dfdf;
}

.field2 {
  text-align: center;
  font-family: Carnas-Light;
  color: #008ad1!important;
  font-size: 35px;
  padding-top: 20px;
  margin-bottom: 10px;
  padding-right: 140px;
  padding-left: 140px;
}

.icons {
  display: flex;
  overflow: hidden;
  justify-content: center;
}

<div class="container3">
  <h2 class="field2">A few of our customers that have already improved their business with WorkWave</h2>
  <div class="icons">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
    <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
  </div>
</div>

Answer 1

  <div class="container3">
      <h2 class="field2">A few of our customers that have already improved their business with WorkWave</h2>
      <div class="icons">
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
        <div>
        <img src="https://image.ibb.co/dBwHRS/customers_relayfoods.png" alt="customers_relayfoods" border="0">
        </div>
      </div>
    </div>



.container3 {
  background-color: #e0dfdf;
}

.field2 {
  text-align: center;
  font-family: Carnas-Light;
  color: #008ad1!important;
  font-size: 35px;
  padding-top: 20px;
  margin-bottom: 10px;
  padding-right: 140px;
  padding-left: 140px;
}

.icons {
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.icons img {
   width: 100%;
}

只需将所有 img 标签包裹在一个 div 中，并为 img 添加 100% 宽度。