Flexbox：如何在Flex项目中使图像高度相等？

Question

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

在min-width: 768px像素的屏幕尺寸中，当有30％的空间时，每个flex-item都会增加为1，即flex：1 30％； flex-direction：更改为行；

问题 ：柔性物品的div本身是在高度和宽度相等的，但每一个柔性物品内部的图像是各种尺寸。

尝试 ：尝试过的对齐项目：拉伸； 甚至给每个图像最小高度都行不通吗？

在使用flex时，甚至还需要flex-wrap：1 30％？

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

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

UPDATE

好的，我认为问题在于6个图像尺寸中的2个尺寸很小，如200 x 250，而其余的尺寸为600-1200px。 因此，我已经通过较大的初始图像大小来解决此问题，以使图像不会失真，并且图像会均匀增长。

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

请重新检查CSS，因为我已对其进行了更新，以使其与上面的图像相匹配！

请帮忙，谢谢！

Answer 1

这不是技术问题，这是概念性问题。 当您拥有不同宽高比的图像并且想要以有序甚至均匀的方式显示它们时，那​​么首先您必须考虑是否要：

a）要失真或被截断的图像，不留空白

要么

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

这些是您的基本选择。

对于a），您可以将图像宽度设置为100％，或将图像包装器设置为溢出-y：隐藏

对于b），您可以设置max-width和max-height并使用您选择的居中方法将图像在包装器中居中。

作为一种额外的可能性，您还可以将flex-basis设置为auto并将flex-grow设置为0，并让flex-box决定行换行之前显示多少个图像。 在大型4k显示器上，您可能始终不希望两行放大的图像

Answer 2

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

Answer 3

我已经使用过此CSS min-height:100%; 以便将较小的图像扩展到父级flex-box项目。 我还对min-height: 220px;硬编码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> 

Answer 4

如果您不希望图像失真，而是希望将图像裁剪到适当的位置以将包含图像的div填充到flexbox中，则这是解决问题的方法。

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

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

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

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