Question

我有一个静态高度容器。

在里面我有一个div元素，其中包含img元素。

下面有一个p标记，用文本动态填充。

当文本较长且p标记变大时，我希望上面的图像缩小以在容器内腾出空间。

我一直在尝试使用flex和flex-shrink执行此操作。这就是我所拥有的：

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main div {
  flex-shrink: 3;
}
img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
p {
  flex-shrink: 0;
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

正如您所看到的，img标记没有缩小以留出足够的空间。这可能与flex-box有关，还是我不得不寻找不同的路线？

Answer 1

默认情况下，弹性项目不能小于其内容的长度。

弹性项目的初始大小为min-height: auto和min-width: auto。

无论flex-shrink如何，您的弹性项目都不会小于您的图片，除非您使用min-height: 0覆盖默认值。（如果您的容器是行方向，则为min-width: 0。）

此外，并非所有浏览器都将父级的弹性高度识别为子元素百分比高度的参考。因此，在图像的父级上指定height或flex-basis非常重要。

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#main div {
  flex: 1 1 100%;              /* 1 */
  min-height: 0;               /* 2 */
}

img {
  height: auto;                /* 3 */
  width: 100%;                 /* 3 */
}

p {
  flex-shrink: 0;
  min-height: 0;               /* 2 */
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

注意：

Chrome / Safari not filling 100% height of flex parent
Why doesn't flex item shrink past content size?
调整原始代码块

当<p>增长并使用flex-box保持纵横比时缩小<img/>

1 个答案: