css - CSS - 如何在内容垂直扩展时扩展英雄背景 div/图像的大小

Question

我在这里查看了其他一些答案，但我无法在我的用例中解决以下问题。我这里有一个codepen

我有一个具有属性的用户英雄背景包装器background-size:cover。这是它目前的样子：

一切看起来都不错，但是如果用户要对自己进行更长的描述，那么文本就会从 div 中溢出：

那么，为了保留用户英雄 div 和背景图像对内容的边距，我应该更改哪些 css 属性？这是我的代码笔的链接

标签： css

Answer 1

问题是您position: absolute;用于定位元素，这会将它们从常规文档流中取出。绝对定位的子元素不会拉伸它们的父元素，它们的行为也不会受到兄弟元素的影响。

因此，基本上，您希望将具有类user-hero-photo-layout-container的 div 与userheroinfowrapper-5wLB0y-layout-containerHTML 标记中的类一起移动到 div 之上。

然后position: absolute;从他们两个中删除。

这是一个示例，说明您的代码在进行这些更改后的样子。