如何讓圖片不影響父元素的高度？有哪些純 CSS 的解決方案？

巧妙控制圖片，讓父元素高度不受影響

網頁布局中，經常遇到父容器高度被子元素（例如高寬比大的圖片）撐大的問題。本文探討如何使用純css方法，讓父容器高度僅受文本內容影響，而不受圖片高度影響。

假設父容器包含一張圖片和一段文字，我們希望父容器高度只根據文字內容確定。 父元素高度被撐開的原因在于，子元素（圖片和文字）未脫離文檔流，且父元素高度未預設。

解決方法主要有：

• 運用絕對定位 (absolute positioning): 將圖片設置為position: absolute;，使其脫離文檔流。圖片在視覺上仍位于父容器內，但不會影響父容器的高度。 需根據實際情況調整圖片的top、left、right、bottom屬性來控制其位置。

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

• 巧用背景圖片 (background-image): 如果允許圖片被裁剪或縮放，可將圖片設置為父容器的背景圖片。 使用background-size、background-position等屬性控制圖片顯示效果。 但此方法不適用于所有情況，尤其當圖片需要保持原始比例和大小的時候。

總而言之，使用絕對定位通常是更直接、更靈活的解決方案，能有效控制圖片不影響父元素高度，確保布局的整潔和預期效果。