彈性基礎：0 不尊重 safari 中的父身高

Question

下面是適用於 chrome 和 firefox 的代碼，其中 img 尊重父級高度並適合它，但在 safari 中，圖像溢出。

我可以通過添加 overflow: hidden 或刪除 flex-basis 來解決這個問題。

有人可以分享信息嗎？

此外，它的 2023 和 flexbox 幾乎穩定。 這是safari中的錯誤嗎？

 .parent { display: flex; flex-direction: column; height: 200px; overflow: hidden; border: 1px solid red; }.child { display: flex; flex-basis: 0; height: 100%; }.innerChild { height: 100%; } img { max-height: 100%; }

 <div class="parent"> <div class="child"> <div class="innerChild"> <img src="https://picsum.photos/id/237/200/600"/> </div> </div> </div>

safari快照

鉻快照

Answer 1

您可以將道具 object-fit 添加到您的 img 中，以便它可以覆蓋其父容器的整個寬度：

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