為什麼「object-fit」不能與 Flexbox 容器一起使用？

為什麼object-fit 在Flexbox 中不起作用

儘管在Flexbox 中實現object-fit 時遇到了問題，其中的圖像等寬的列保持不變，有一個根植於屬性定義的邏輯解釋。

如規範中，object-fit 規定了替換元素（在本例中為圖像）如何適合由其高度和寬度定義的框。然而，要掌握的關鍵點是，盒子屬於圖像本身，而不是其容器。

因此，要解決此問題，請完全刪除容器並將彈性項目狀態直接指派給映像，如更新的程式碼片段所示：

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

以上是為什麼「object-fit」不能與 Flexbox 容器一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！