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

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

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

解决方法主要有：

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

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

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

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

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