Firefox flexbox 图像宽度答案

【问题标题】：Firefox flexbox image widthFirefox flexbox 图像宽度
【发布时间】：2015-04-26 22:29:01
【问题描述】：

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

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

铬：

火狐：

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

【问题讨论】：

标签： html css firefox flexbox

【解决方案1】：

您需要在 .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>

【讨论】：

谢谢！ min-width: 0; 解决了我的问题。 Firefox 应用了min-width: -moz-min-content，Chrome 应用了min-width: auto。

【解决方案2】：

我不得不承认我不确定为什么，但出于某种原因，在 Firefox 中，您似乎必须为图像指定宽度/高度（即“自动”以外的其他内容） .我们的老朋友100% 似乎成功了：

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

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

【讨论】：

谢谢，但我已经知道这一点，我会更新问题以更具体地说明图像是否永远不应大于其原始尺寸。
我的问题并不完全相同，但这促使我尝试在图像上使用width 而不是min-width，这解决了我的问题。
当图像没有它的容器那么宽时，当该容器是一个弹性项目时，这将不起作用。图像将拉伸到容器的整个宽度。
这也解决了我的问题，但正如@DawnPaladin 所提到的，这是max-width: 100% 的问题，它没有正确应用。 width: 100% 是解决方法。答案中的height 和display 是不必要的，修复了通常用vertical-align: middle 修复的图像上的经典垂直空间。

【解决方案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; 让项目弯曲。

图像上的其他东西不需要。

【讨论】：

【解决方案4】：

根据我的经验，这种方法略有不同，可能很奇怪，但它确实有效。基本上，我将最大宽度固定为真实图像宽度，因此它不会像素化，并使用百分比宽度而不是最大宽度。如果你有，比如说<ul> (flex) 容器，单元格将是：

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

【讨论】：