Flexbox:如何使图像在弯曲的项目中等高？
好的，所以我试着在6个柔性盒内显示宽度和高度相等的图像。
在使用min-width: 768px的屏幕尺寸中，当有30%的空间时，每个柔性项都会增长到1，即挠度:1 30%，弯曲方向:改为行；
problem：flex项div本身在高度和宽度上是相等的，但是每个flex项中的图像大小不同。
尝试：尝试过对齐项:拉伸；甚至给每个图像以最小高度都不起作用？
在使用flex: 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>
更新
好的，我认为问题是，6幅图像中有2幅是小的，比如200×250，其余的是600-1200 of。因此，我修正了这一点，用较大的图像大小作为初始，这样图像就不会被扭曲，也会以相等的速度增长。
注意第一个和最后一个图像高度不相等，但是为什么？
请再次检查CSS，因为我已经用更改更新了它，以匹配上面的图像！
请帮帮忙，谢谢！
回答 4
Stack Overflow用户
发布于 2017-11-23 09:23:19
我已经将这个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>
Stack Overflow用户
发布于 2017-11-23 10:05:41
这不是技术问题，而是概念问题。当你有不同长宽比的图像，你想要有秩序地显示它们，甚至曼诺，那么你必须首先考虑你是否想：
( a)要失真或截断的图像，以不留下空白。
或
b)图像之间或周围有空白。在这种情况下，您还可以决定如何分发空白空间。
这是你的基本选择。
对于a)可以将图像宽度设置为100%，或者将图像包装设置为溢出-y:隐藏。
对于b)您可以设置最大宽度和最大高度，并使用您选择的对中方法在包装中对图像进行中心化。
作为一种额外的可能性，您还可以将flex基础设置为auto和flex-grow，并让flex框决定在行包装之前显示多少图像。在大型4k显示器上，您可能不希望看到两行放大的图像。
Stack Overflow用户
发布于 2017-11-23 09:15:13
您能尝试将图像设置为flex中的背景图像吗？然后，您可以这样做:背景大小:盖子；这将确保所有的div都被图像覆盖，尽管其中一些可能会丢失，这取决于它相对于div的比例。如果仍然需要alt标记，可以尝试在div中添加一个透明的png占位符，该占位符可以包含alt文本。
https://stackoverflow.com/questions/47451445
复制相似问题
腾讯云开发者
