嘿，大家好！最近好多朋友问我一个问题， 就是用 CSS 定位图片的时候，经常遇到一个坑：图片放进去后父元素的高度没撑高，后来啊图片就溢出来了。 我比较认同... 听起来挺烦人的吧？别担心，今天我就来给你们好好地讲讲这个问题怎么解决。咱们用通俗易懂的语言来聊聊。

一、为什么绝对定位图片会导致父元素高度没撑高？

我晕... 先说说咱们得搞清楚一下为什么会出现这个问题。咱们把 HTML 和 CSS 都写下来看看：

你看，`` 这个标签是 `position: absolute` 的。这意味着它会脱离正常的文档流。正常情况下`` 会占据一定的空间，然后它的父元素会根据图片的尺寸来决定自己的高度。 图啥呢？ 但是当 `` 脱离文档流后它不再占用空间了。所以 `.image-container` 的高度也就没有被撑高了导致图片溢出。

二、 解决方案一：JavaScript动态计算并设置父元素高度

虽然纯 CSS 有办法解决这个问题，但是使用 JavaScript 来动态计算和设置父元素的 height 是个比较直接的方法，一针见血。。

代码示例

这段 JavaScript 代码做了什么呢？先说说它获取到了 `.container` 和 `.image` 这两个元素。然后它调用 `calculateContainerHeight` 函数来计算出 `.container` 的高度。再说说它将 `.container` 的 `height` 属性设置为计算出的值，CPU你。。

优点

• 简单直接
• 不需要复杂的 CSS 设置

缺点

• 需要编写 JavaScript 代码
• 可能会影响页面的性能
• 每次页面加载都需要重新计算高度

三、解决方案二：纯CSS方案 - 背景画像实现高度自适应

`positioning` 虽然能让绝对定位的图像脱离文档流, 但是还是有更好的方法可以保证父元素的正确包裹效果。

背景画像方案

我倾向于... 使用CSS的背景画像来实现类似的效果 。 将`.image’设置为背景画像 , 一边设置`.background-image’的属性让其自动调整尺寸 , 以适应容器.

结合aspect ratio实现自适应

`aspectRatio:`属性可以让图像保持宽高比 ，这样无论图像的大小如何 , 父元素的尺寸都会自动调整以匹配图像的宽高比 。 这是一种非常现代且灵活的方式 ， 可以有效地避免溢出问题 。 

` aspect ratio可以配合 `objectFit:`进行更细致的处理 `

• 纯CSS实现 ， 无需JavaScript
• 性能更好
• 更加灵活

---

• 需要对CSS有一定的了解

四、注意事项

• **选择合适的解决方案:** 选择哪种解决方案取决于你的具体需求和项目情况。如果你的项目比较简单 ，那么使用 JavaScript 可能就足够了。如果你的项目比较复杂 ，那么使用纯 CSS 可能就更合适了。
• **注意性能:** 在使用 JavaScript 时 ， 要注意优化代码 ，避免影响页面的性能。 可以:** 在不同的浏览器和设备上测试你的代码 ，确保你的代码能够正常工作 。 不同设备屏幕尺寸可能不一样 , 要注意测试覆盖范围 .

---