Flexbox - 图像高度相同答案

【问题标题】：Flexbox - image same heightFlexbox - 图像高度相同
【发布时间】：2018-01-30 15:03:00
【问题描述】：

我制作了带有 flex 属性的容器。放入3张相同高度830px但宽度不同的图片：

图像 602x830 像素
图像 613x830 像素
图像 599x830 像素

为图片属性制作：宽度 100% 在屏幕尺寸超过 630 像素之前，一切似乎都正确。屏幕变为 630 像素后，一个图像 (2-img) 的高度变得小于其他两个图像。

无论屏幕尺寸如何，如何使所有图像的高度相同。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
  <style type="text/css">
    .category-block {
      max-width: 768px; 
      margin:0 auto;
      overflow:hidden;
    }
    .flex-block {
      display:flex;
      flex-direction: row; 
      align-items: stretch; 
    }
    .flex-block img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="category-block">
      <div class="flex-block">
          <div class="flex-block__area">
              <img src="1-img.jpg"></img>
          </div>
           <div class="flex-block__area">
              <img src="2-img.jpg"></img>
          </div>
           <div class="flex-block__area">
              <img src="3-img.jpg"></img>
          </div>
      </div>
  </div>
</body>
</html>

【问题讨论】：

我的回答中是否缺少某些内容我可以添加或调整以供您接受？ ...或者它根本不起作用？

标签： image css flexbox image-gallery

【解决方案1】：

这是我在 Firefox 上发现的一个问题，我还没有找到失败的原因。

这是一种解决方法，使用 Firefox CSS hack，同时使 flex-block__area 成为弹性容器。

CSS hack 只需要针对 Firefox，否则会弄乱其他浏览器

Fiddle demo

堆栈sn-p

.category-block {
  max-width: 768px;
  margin: 0 auto;
  overflow: hidden;
}

.flex-block {
  display: flex;
}

.flex-block img {
  width: 100%;
}

/* Firefox bug fix */
@supports (-moz-appearance:meterbar) and (display:flex) {
  .flex-block__area {
    display: flex;
  }
}

<div class="category-block">
  <div class="flex-block">
    <div class="flex-block__area">
      <img src="http://placehold.it/602x830/f00">
    </div>
    <div class="flex-block__area">
      <img src="http://placehold.it/613x830/0f0">
    </div>
    <div class="flex-block__area">
      <img src="http://placehold.it/599x830/00f">
    </div>
  </div>
</div>

【讨论】：

这工作太奇怪了！很想知道幕后发生了什么......
@Coburn -- 是的，我也会，但我还没有找到原因的答案，所以现在我很满意这个解决方法可以解决它。