flexbox 中的图像行为（行嵌入列中）

Question

下面fiddle有3块。

块 1 包含三列。中间列有两行，每行设置为 flex:1。

块 2 包含三列。中间列有两行，每行设置为 flex:1。第二行包含一张狗的图像。图像不会缩小到包含它的行的高度。

块 3 仅包含中间列，其中有两行，每行设置为 flex:1。第二行包含一张狗的图像。图像确实缩小到包含它的行的高度。

问题是为什么块2中列第二行的图片没有缩小到它所在行的高度？我可以添加哪些 CSS 规则来实现这一点？

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
       
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second">
             <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>
<div class="right column"></div>
</div>

<div class="middle block">
  <div class="row first"></div>
  <div class="row second">
             <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>

Answer 1

这是一种使用 relative/absolute 定位的解决方案。不确定它是否像某些 MXMJ 类型所说的 "kosher"，但它有效。请参阅 CSS.

底部添加的代码

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

/* Added Code */
.middle .row {
    position: relative;
}

.middle .row img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 95%;
    max-height: 95%;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
       
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second">
             <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
  <div class="row first"></div>
  <div class="row second">
             <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>

Answer 2

解决方案

替换：

.row {
    flex: 1;
    border: 1px solid black;
    display: flex;
    align-items: stretch;
}

与：

.row {
    flex: 1 1 0px;             /* adjustment on this line */
    border: 1px solid black;   /* no change */
    display: flex;             /* no change */
    align-items: stretch;      /* no change */
}

DEMO 1

说明

您写道：

The question is why does the image in the second row of the middle column of block 2 not shrink to the height of the row within which it is contained?

您似乎只在 Chrome 中测试了您的代码，因为当涉及到 Firefox 和 IE11 时，您的问题前提是错误的。

在那些浏览器中，块二中的狗图像很好地包含在弹性项目中。该图像在 IE 中有点拉伸，但仍然包含在内。

您的问题似乎是 Chrome 特定的。（我没有在 Safari 中测试，但那是像 Chrome 这样的 WebKit 浏览器，所以解决方案可能类似。）

如果您想跨浏览器进行测试，这里有一个原始代码的演示：

DEMO 2

这个问题的解决方案很有趣，因为属性值中看似微不足道的小差异会在 Chrome 渲染中产生很大差异。

您的图像是 div.row 的子元素（更具体地说：弹性项目），一个具有行方向的弹性容器。

div.row 也是一个较大容器（在列方向）的弹性项目，并应用了 flex: 1。 Chrome 中的问题根源于 flex: 1 声明。

flex: 1是什么意思？

flex 属性对于 flex-grow, flex-shrink and flex-basis 是 shorthand。

flex: 1 等同于 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0%。

请注意 0 之后的百分号 (%)。它在 flexbox 规范的 Common Values of flex 中定义，它实际上有所不同。

在 Chrome 中试试这个：

将 div.row 中的 flex: 1 替换为等效的 flex: 1 1 0%。您会注意到渲染时没有任何变化。

现在删除百分号并再次运行。图像卡入到位。

如 CSS-Tricks 中所述，使其成为 flex: 1 1 0px 也有效。

DEMO 3

因此，在 0 上使用 px 或不使用单位 - 而不是百分比 - 修复了 Chrome 中的问题......并且它不会破坏 Firefox 中的任何内容.

然而，在 IE11 中，px 有效，但 unitless 无效。事实上，unitless 抹杀了布局。

但是IE11就是另外一回事了...

在 caniuse.com 上的浏览器支持数据网站 caniuse.com, IE11 was showing full support for flexbox until recently, when it was downgraded to partial support due to the "large amount of bugs present". In testing the above demos, IE11 regularly rendered the same code differently on refresh. See the Known Issues 选项卡上获取问题列表。

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. IE11, as mentioned above, offers partial support due to several known bugs. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in 。

flexbox 中的图像行为（行嵌入列中）

Image behavior within flexbox (rows embedded in columns)

html

css

flexbox

解决方案

说明