Flexbox：如何使图像在弹性项目中的高度相等？答案

【问题标题】：Flexbox: How to make images equal height in flex items?Flexbox：如何使图像在弹性项目中的高度相等？
【发布时间】：2018-05-07 04:19:37
【问题描述】：

好的，所以我尝试在 6 个 flexbox 项目内显示宽度和高度相等的图像。

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

问题：flex item div 本身的高度和宽度是相等的，但是每个flex item 内的图像大小不一。

尝试：尝试了对齐项目：拉伸；甚至给每个图像都赋予最小高度不起作用？

在使用 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，因为我已经更新了它以匹配上面的图片！

请帮忙，谢谢！

【问题讨论】：

在屏幕宽度从 768 像素起，它们对我来说每行的高度和宽度必须相同，那有什么问题吗？
img { 高度：300px;宽度：300px；边框：0；为 img 设置一个固定的宽度和高度，它们将保持任何图像的宽度和高度。
@HarshitDamani 这会扭曲具有不同纵横比的图像。
@LGSon 正如帖子中提到的那样，他们确实尝试通过“拉伸”来制作相同大小的图像，等等。所以，我不知道他们是否会介意。
是的，你需要flex-wrap: wrap，否则都将留在一行

标签： jquery html css flexbox

【解决方案1】：

您可以尝试将图像设置为 flex div 内的背景图像吗？然后你可以这样做： background-size:cover;这将确保所有 div 都被图像覆盖，尽管根据其与 div 的比例，其中一些可能会丢失。如果您仍然想要 alt 标签，您可以尝试在 div 中添加一个透明的 png 占位符，该占位符可以包含 alt 文本。

【讨论】：

由于图像的主要焦点通常在中心，您可以随时添加background-position:center center;，这样只有侧面会被裁剪。

【解决方案2】：

我已使用此 css min-height:100%; 将较小的图像扩展到父 flex-box 项目。我还硬编码了min-height: 220px; 到父项，只是为了让所有的高度都相等.. 全屏查看 sn-p 以了解它是如何工作的..

/* ## 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>

【讨论】：

很确定图像现在看起来不错，因为它们每个都有相同的一面。但是，如果任何 2 张图像的高宽比都不相同，则图像会失真。如果你避免扭曲它，那么它就不会填满其父 div 元素的整个区域。

【解决方案3】：

如果您不希望图像失真，而是希望将它们裁剪到位以填充包含它的 div，那么这里有一个解决方案。

.flex-box{
  height:200px;
  overflow-y: hidden;
}

img {
    width: 300px;
    border: 0;
}

这会将父容器的高度设置为固定，如果图像溢出则隐藏。并且图像在父 div 内保持固定宽度。

如果不是，您的另一种选择是我在评论中提到的将图像的宽度和高度设置为固定值。

【讨论】：

使用此解决方案，图像将在 1920 像素宽的屏幕上看起来像微缩模型。
那些“尺寸”只是给出了如何修复图像和父 div 大小的想法，没有提到值需要分别为 200 和 300px。并且根据屏幕大小，可以实现@media 查询来调整它。

【解决方案4】：

这不是技术问题，这是概念问题。当你有不同纵横比的图像，并且你想以有序、均匀的方式显示它们时，首先你必须考虑是否要：

a) 要扭曲或截断的图像以不留空白

或

b) 图像之间或周围有空格。在这种情况下，您还可以决定如何分配空格。

这些是您的基本选择。

对于 a) 您可以将图像宽度设置为 100% 或将图像包装器设置为 overflow-y: hidden

对于 b)，您可以设置最大宽度和最大高度，并使用您选择的居中方法将图像居中在包装器中。

作为额外的可能性，您还可以将 flex-basis 设置为 auto 并将 flex-grow 设置为 0 并让 flex-box 决定在换行之前显示多少图像。在大型 4k 显示器上，您可能无论如何都不需要两行放大的图像

【讨论】：