让外层div自动匹配内嵌图片高度的技巧

在网页布局中，经常需要外层div的高度能根据内部图片的高度自动调整。本文将通过一个实际案例，讲解如何解决div高度无法自适应图片高度的问题。

问题：

页面上一个div包含一张图片，但div高度并未随图片高度变化而改变，导致页面布局混乱。图片高度是动态的，我们需要div自动调整高度以适应图片。

解决方案：

为了让外层div的高度与图片高度一致，我们可以巧妙地运用CSS定位属性。 问题答案中建议调整img元素和外层div的position属性。

具体方法：将img元素的position属性设置为static（默认值）或relative。同时，将包含图片的外层div的position属性设置为absolute。 通过absolute定位，div脱离文档流，其高度完全由内容（图片）决定。 图片高度确定后，div高度自然与其一致。 需要注意的是，这种方法需要外层div的父元素设置position: relative;，否则absolute定位无效。

当然，还有其他方法，例如使用JavaScript动态获取图片高度并设置给div，或使用Flexbox布局等。但根据案例，修改position属性是最直接高效的方案。