图像扩展了 flex 父级的高度，但在 chrome 和 safari 中出现了奇怪的 hack答案

【问题标题】：Image extends height of flex parent, but behaves with a weird hack in chrome and safari图像扩展了 flex 父级的高度，但在 chrome 和 safari 中出现了奇怪的 hack
【发布时间】：2020-06-09 00:08:02
【问题描述】：

我在一个弹性容器中有一个image（我们称之为child）。容器本身具有flex: 1，因为它也属于具有flex-direction: column 和child 的flex parent，在引入图像情况之前，其行为符合预期（占用父级的100% 高度）。

在向child 添加图像时，图像会扩展child 以适应其高度，实际上是child 推动parent。

在图像上使用object-fit: cover 在这种情况下无济于事！

看起来这是 Chrome、Firefox 和 Safari 中的正常行为。

这是奇怪的部分：将 height 属性添加到 child 可以解决 Chrome 和 Safari 上的问题，但不能解决 Firefox 上的问题。这个高度的值并不重要，只要它不大于child 的计算高度 - child 与图像一起包含在 parent 的 100% height 中 - 即使 child 的高度值设置为1px。令人惊讶的是，height: 100% 上的 child 不会产生相同的行为。

对此的任何想法将不胜感激。我的目标是让image 始终占据100% of child - 无论视口的宽度如何。

这里有一些用于说明的代码

#parent {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#child {
  flex: 1;
  height: 1px;
  /* the weird hack for chrome and safari - ff ignores it */
}

#child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
</div>

我还添加了一些图片以获得更多上下文。这些是整个页面的裁剪。第一个图像来自较小的视口（与 devtools 共享宽度），第二个来自整个页面（devtools 隐藏）。第二张图片显示 image 已扩展 child 以最终将具有绿色背景的容器推到折叠之外 - 导致出现滚动条。

child 是图像包装器，parent 是具有白色背景和一些填充的组件。你意识到parent 有一个兄弟（绿色背景），它们的父级（带有绿色边框和边框半径的容器）有一个display: grid 和grid-template-rows: 1fr auto;。

还应注意，最顶层元素的高度为100vh，其所有子元素都在其中呈现。本质上不应该有滚动条。

希望你能明白。

【问题讨论】：

为孩子尝试min-height:0
无效@TemaniAfif。你为什么认为这会起作用？ ????
stackoverflow.com/a/36247448/8620333
链接@TemaniAfif 是真的。显然min-height: 0 也适用于grid 容器。但是，我注意到它应该应用于 top-level 父级，并且还会自动截断任何溢出的内容 - 只要已容纳图像的整个高度。
你真的需要吗？听起来您希望实现的目标（“使图像始终占据 100% 的子元素 - 无论视口的宽度如何”）可以改为将背景图像设置为该 #child，例如 background: url('imageURL') center / auto 100% no-repeat

标签： html css flexbox

【解决方案1】：

这是您想要做的吗？你也可以在这里看到：https://codepen.io/teanbiscuits/pen/GRJmPgo

#parent {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  border:2px solid green;
  border-radius:20px;
  overflow:hidden;
}

#child {
  position:relative;
}

#child img {
  position:absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#text {
  background-color:green;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
  <div id="text">
    <h2>some title here</h2>
    <p>Some description here</p>
  </div>
</div>

【讨论】：

你赢得了赏金！我喜欢你处理这个问题的方式 - 使用 absolute 定位使图像表现良好。
谢谢！这是我经常使用的一种方法。根据您希望图像的显示方式以及它是否是产品图像，您可以更改“object-fit：contain;”到“对象适合：封面；”

【解决方案2】：

请试试这个。只需选择首选的对象匹配即可。

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
#parent {
  height: calc(100vh - 20px);
  display: flex;
  padding: 10px;
  flex-direction: column;
}

#child {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

#child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
  <div id="text">
    <h2>Some title here</h2>
    <p>Some description here</p>
  </div>
</div>

【讨论】：