如何避免图片撑大父元素高度？

网页布局中，父容器高度常受子元素（如图片）影响。但我们有时希望父容器高度仅由文本内容决定，不受图片高度影响。例如，一个父容器（红色边框）包含文本和图片（黑色边框）子元素，我们希望父容器高度只根据文本内容调整，而非图片高度。如下图所示，当前父元素高度被图片撑大。如何仅用css让图片高度跟随文本？

问题在于，除非父元素高度固定或子元素脱离文档流，否则父元素高度将被最高子元素撑开。因此，要避免图片撑大父元素高度，可考虑：

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

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

下载

• 使用绝对定位： 将图片设置为position: absolute;，使其脱离文档流，不再影响父元素高度。
• 背景图片： 将图片作为背景图片（background-image），但需注意可能出现图片裁切。本例中，因图片需保持完整显示，背景图片法不太适用。

因此，最直接有效的方法是使用绝对定位。 通过将图片绝对定位，它将脱离文档流，从而不会影响父容器的高度，父容器高度将仅由文本内容决定。