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

下面有图标，当屏幕缩小时，这些图标从页面溢出。我尝试设置中宽度100％和其他技术，但没有任何效果。如何允许这些弹性项目图像缩小而不离开页面？

.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>

最佳答案

  <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％的宽度。

关于html - 如何允许 flex 元素图像缩小而不离开页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48749092/