如何使用CSS讓圖片不撐高父元素？

巧用css，圖片不再撐高父元素

前端布局中，控制元素高度是常見挑戰。例如，父容器包含文字和圖片，我們希望父容器高度僅受文字影響，圖片高度不干擾。本文將介紹純CSS解決方案。

父容器被子元素撐高的原因在于：子元素（圖片或文字）未脫離文檔流，且父元素高度未固定。因此，最大高度的子元素決定父元素高度。

基于此，我們提供以下CSS技巧：

1. 絕對定位法： 將圖片設置為絕對定位 (position: absolute)，使其脫離文檔流，不再影響父元素高度。父元素需設置為相對定位 (position: relative) 作為絕對定位的參考點。

   立即學習“前端免費學習筆記（深入）”；

    .parent {    position: relative;   }  .image {    position: absolute;     top: 0;     left: 0;   }

   此方法簡潔有效，父容器高度只受文字內容影響。

2. 背景圖法： 若圖片僅作裝飾，可將其設置為背景圖，而非獨立元素。背景圖不影響父元素高度，但可能被裁切，需用css屬性調整。此方法根據實際效果圖可能并不適用。

綜上，絕對定位法是解決此問題的首選方案，簡單直接地控制父元素高度，不受圖片高度干擾。