如何避免图片撑大父容器高度?
网页布局中,我们常遇到父容器高度被图片等子元素撑大的问题。例如,一个红色边框的父容器包含文字和图片(黑色边框),父容器高度会根据子元素最高者而定,尤其图片过高时问题明显。下图所示:
我们希望父容器高度仅受文字内容影响,如何仅用CSS解决?
几种方法:
-
绝对定位: 将图片设置为
position: absolute;。脱离文档流的图片不再影响父容器高度。 -
背景图片: 将图片设为父容器背景图(
background-image)。但可能导致图片裁切,并非所有情况适用。
综合来看,绝对定位是简单直接的解决方案。将图片设为绝对定位,父容器高度将只取决于文本内容。
立即学习“前端免费学习笔记(深入)”;










