Firefox flexbox 图像宽度

Question

我无法让我的图像占用父容器可用宽度的 100% 以下。我只注意到 Firefox 36（不是 IE 或 Chrome）中的问题。这是 Firefox 的错误还是我在这里遗漏了什么？

注意：图片不得大于其原始尺寸。

Chrome:

火狐：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Answer 1

我不得不承认我不确定为什么，但出于某种原因，在 Firefox 中，您似乎必须给图像一个 width/height（即"auto" 以外的东西）。我们的老朋友 100% 似乎可以解决问题：

.flexbox .middleColumn img {
    width: 100%;
    height: 100%;
    display: block;
}

Here's a fiddle showing the working solution。请注意，我将侧栏更改为 flex:2 以使结果更加明显。

Answer 2

您需要在 .middleColumn 上添加 min-width:0，如果您想让它缩小到其最小内容宽度（其 <img>-child 的固有宽度）以下。

否则，它将获得新的默认值 min-width:auto，这在弹性项目上基本上会使其拒绝收缩到其收缩包装尺寸以下。

(Chrome hasn't implemented min-width:auto 还没有。我听说 IE 在他们的下一代渲染引擎中有，所以我希望该版本在这里的行为应该像 Firefox -- 一旦他们实施此功能，Chrome 也会如此。）

已修复的代码段：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
  min-width:0;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Answer 3

我似乎可以使用以下方法：

.flexbox {
  display:flex;
}
.flexbox .column {
  flex:1 1 0;
  overflow:hidden;
  background-color: red;
}

.flexbox .middleColumn {
  flex-grow:3;
  flex-shrink:3;
}

.flexbox .middleColumn img {
  max-width:100%;
}

在所有列上设置 flex:1 1 0; 将它们设置为平均增长，并从 0px 的均匀和微小的基础开始。

然后您在 .middleColumn

上覆盖增长和收缩照常需要

max-width:100%;

神奇的是 overflow:hidden; 物品变弯曲了。

图片上的其他内容不需要。

Answer 4

根据我的经验，该方法略有不同，可能很奇怪，但它确实有效。基本上，我将最大宽度固定为实际图像宽度，因此它不会像素化，并使用百分比宽度而不是最大宽度。如果您有一个 <ul>（弹性）容器，则单元格将为：

li{
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   width: 50%; // for example..

   img{
     display: block;
     max-width: [your real img width in px] // instead of 100%;
     width:100%; // instead of max-width
   }
}

Firefox flexbox 图像宽度

Firefox flexbox image width

html

css

firefox

flexbox