Question

我在使图像占用不超过父容器可用宽度的100％时遇到了一些麻烦。我只注意到Firefox 36（不是IE或Chrome）中的问题。那么它是一个firefox bug还是我在这里错过了什么？

注意：图像不应大于原始尺寸。

铬：

enter image description here

火狐：

enter image description here

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

如果要允许它缩小到其最小内容宽度（其min-width:0 - 子的内在宽度）以下，则需要在.middleColumn上添加<img>。

否则，它会获得新的默认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 2

我不得不承认我不确定为什么，但出于某种原因，在Firefox中看起来你必须给图像一个宽度/高度（即＆＃以外的东西） 34;自动＆＃34）。我们的老朋友100%似乎可以解决问题：

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

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

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

Firefox flexbox图像宽度

4 个答案: