Question

我有4个弹性盒子（div），里面有img和文本，我需要这些div（带内容）缩小导航器时调整大小，所以我尝试了100％in图像和div的宽度/高度，但是它会导致比原始图像更大的图像，以及在缩小导航器时调整大小的奇怪方法。

以下是相关代码：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

如果您不希望图像增长，请使用max-width和max-height代替height和height。

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

要允许弹性项目缩小，请使用

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何制作图像尺寸＆＃39; liquid＆＃39;当我使用flexbox时

1 个答案: