html - 使用 flexbox 时如何使图像大小为 'liquid'

Question

我有 4 个 flex boxes(divs)，每个里面都有一个 img 和文本，我需要这些 div(及其内容)当我缩小导航器时调整大小，所以我尝试了 100%图像和 div 的宽度/高度，但它会产生比原始图像更大的图像，并且当我缩小导航器时调整大小的方式很奇怪。

相关代码如下:

#features {
  display: flex;
  justify-content: space-around;
}
#features div {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#features img {
  width: 100%;
  height: 100%;
}
#features h2 {
  margin-top: 1em;
}

<section id="features" class="section">
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_01_zpsriojptqd.png" />
    <h2>Quick Turnarounds</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_02_zpscbrrxxka.png" />
    <h2>Free Samples</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_03_zpsynab7yod.png" />
    <h2>High Quality</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_04_zpsskjkfque.png" />
    <h2>Easy To Order</h2>	
  </div>
</section>

Answer 1

如果您不希望图像变大，请使用 max-width 和 max-height 而不是 height 和 高度。

#features img {
  max-width: 100%;
  max-height: 100%;
}

允许 flex 元素收缩，使用

#features div {
  flex: 1; /* Distribute widths equally */
  min-width: 0; /* Ignore contents */
}

#features {
  display: flex;
  justify-content: space-around;
}
#features div {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
#features img {
  max-width: 100%;
  max-height: 100%;
}
#features h2 {
  margin-top: 1em;
}

<section id="features" class="section">
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_01_zpsriojptqd.png" />
    <h2>Quick Turnarounds</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_02_zpscbrrxxka.png" />
    <h2>Free Samples</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_03_zpsynab7yod.png" />
    <h2>High Quality</h2>	
  </div>
  <div>
    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/feature_04_zpsskjkfque.png" />
    <h2>Easy To Order</h2>	
  </div>
</section>