jquery - Flexbox:如何使图像在 flex 元素中等高？

Question

好的，所以我尝试在 6 个 flexbox 元素中显示宽度和高度相同的图像。

在 min-width: 768px 的屏幕尺寸中，当有 30% 的空间时，每个 flex-item 增长到 1，即 flex: 1 30%; flex-direction: 改为 row;

问题: flex 元素 div 本身的高度和宽度相等，但每个 flex 元素内的图像大小不同。

尝试:尝试对齐元素:拉伸(stretch)；甚至为每张图片设置最小高度也不起作用？

使用 flex: 1 30% 时还需要 flex-wrap 吗？

我显然做错了什么，有什么想法吗？

/* ## Services */
.services-wrap {
  text-align: center;
  padding-top: 4rem;
}

.services-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.service-img {
  min-height: 100% !important;
  /*width: 100%;*/
}

@media screen and (min-width: 768px) {
  .services-flex {
    flex-direction: row;
    padding: 0 4rem;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 1500px;
    margin: auto;
  }
  .flex-box {
    flex: 1 30%;
    /*margin: 1rem;*/
  }
}

<section class="services-wrap">
  <h3>OUR SERVICE</h3>
  <hr>
  <div class="services-flex">
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/comercial.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/residential.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/rural.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/industrial.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg">
    </div>
  </div>
</section>

更新

好吧，我认为问题在于 6 个图像尺寸中有 2 个尺寸较小，例如 200 x 250，而其余尺寸为 600-1200 像素。因此，我通过初始设置更大的图像尺寸来解决此问题，这样图像就不会失真并且也可以均匀增长。

请注意第一个和最后一个图像高度不相等，但这是为什么？

请再次检查 CSS，因为我已将其更新为与上图匹配的更改!

请帮忙，谢谢!

Answer 1

我已将此 css min-height:100%; 用于较小的图像以扩展到父级 flex-box 元素。我还硬编码了 min-height: 220px; 到父项，只是为了让它们具有相同的高度。全屏查看代码片段以了解它是如何工作的。

/* ## Services */

.services-wrap {
  text-align: center;
  padding-top: 4rem;
}

.services-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .services-flex {
    flex-direction: row;
    padding: 0 4rem;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 1500px;
    margin: auto;
  }
  .flex-box {
    flex: 1 30%;
    margin: 1rem;
    min-height: 220px;
  }
}

img {
  min-height: 100%!important;
}

<section class="services-wrap">
  <h3>OUR SERVICE</h3>
  <hr>
  <div class="services-flex">
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/125">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/155">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/175">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/195">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/205">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://placehold.it/225">
    </div>

  </div>

</section>