Question

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

在屏幕尺寸为min-width: 768px时，当空间为30％时，每个flex-item增加到1，即 flex：1 30％; flex-direction：更改为行;

问题：弹性项目divs的高度和宽度相同，但每个弹性项目内的图像都是各种尺寸。

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

使用flex时，甚至还需要灵活包装：1 30％？

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新

好吧我认为这个问题是6个图像尺寸中的2个像200到250那么小，而其余图像是600-1200px。因此，我通过将较大的图像尺寸初始化来修复此问题，因此图像不会失真并且也会相等。

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

请再次检查CSS，因为我已根据上面的图片进行了更新更新了它！

请帮助，谢谢！

Answer 1

这不是技术问题，这是概念性问题。如果你有不同宽高比的图像，并且你想要有序地显示它们，甚至是mannor，那么首先你要考虑是否需要：

a）要扭曲或截断的图像不留空格

或

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

这些是您的基本选择。

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

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

作为奖励的可能性，您还可以将弹性基础设置为自动和弹性增长为0，并让弹性框决定在换行之前显示的图像数量。在大型4k显示器上，您可能不需要两行放大图像

Answer 2

您可以尝试将图像设置为flex div中的背景图像吗？那时你可以这样做：background-size：cover;这将确保图像覆盖所有div，尽管其中一些可能会丢失，具体取决于它与div相比的比例。如果您仍然需要alt标记，可以尝试在div中添加一个透明的png占位符，该占位符可以包含替换文本。

Answer 3

我已将此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>

Answer 4

如果您不希望图像变形，而且如果您想让它们在适当的位置进行裁剪，只是为了填充包含在Flexbox中的div，那么这就解决了您的问题。

Traceback (most recent call last):
  File path, line 38, in <module>
    print('%s (%.2f%%)' % (label[1], label[2] * 100))
IndexError: string index out of range

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

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

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

4 个答案: