如何让图片不影响父元素的高度？有哪些纯 CSS 的解决方案？

巧妙控制图片，让父元素高度不受影响

网页布局中，经常遇到父容器高度被子元素（例如高宽比大的图片）撑大的问题。本文探讨如何使用纯css方法，让父容器高度仅受文本内容影响，而不受图片高度影响。

假设父容器包含一张图片和一段文字，我们希望父容器高度只根据文字内容确定。 父元素高度被撑开的原因在于，子元素（图片和文字）未脱离文档流，且父元素高度未预设。

解决方法主要有：

• 运用绝对定位 (absolute positioning): 将图片设置为position: absolute;，使其脱离文档流。图片在视觉上仍位于父容器内，但不会影响父容器的高度。 需根据实际情况调整图片的top、left、right、bottom属性来控制其位置。

  立即学习“前端免费学习笔记（深入）”；

• 巧用背景图片 (background-image): 如果允许图片被裁剪或缩放，可将图片设置为父容器的背景图片。 使用background-size、background-position等属性控制图片显示效果。 但此方法不适用于所有情况，尤其当图片需要保持原始比例和大小的时候。

总而言之，使用绝对定位通常是更直接、更灵活的解决方案，能有效控制图片不影响父元素高度，确保布局的整洁和预期效果。