顶部带有 <div> 的响应式英雄 BG 图像答案

【问题标题】：Responsive hero BG image with <div> on top顶部带有 <div> 的响应式英雄 BG 图像
【发布时间】：2021-11-22 15:38:28
【问题描述】：

我正在尝试创建一个响应式、全页宽度的英雄 img/banner，顶部有一些文字。

因为我想要一个位于 img/banner 顶部的 div，包含一些文本，所以我选择对图像使用 CSS background-image 属性（而不是 HTML <img> 元素）（我正在尝试尽可能避免使用position: absolute）。

经过一番折腾，我似乎找到了一个很好的解决方案，让 background-image 属性的行为就像 HTML <img> 元素一样（这正是我希望 img 在调整大小时的行为方式）。 ..

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-img {
  background-image: url('https://www.bbva.com/wp-content/uploads/2016/12/Carl-Sagan-BBVA-1920x0-c-f.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 40.57%;
  /* (img-height / img-width * width) */
  /* (779 / 1920 * 100) */
}

...然而，这种让图像正常运行的“迂回”解决方案需要使用 padding 来增加 bg-image 容器的高度，这会迫使<div> 包含我的文本内容关闭图像和页面下方:(

有什么方法可以解决这个问题，而不需要在文本 div 上使用绝对定位来让它位于 bg-img 的顶部？

我把所有东西都放在一支笔里，以便更容易玩： https://codepen.io/Hacktinium/pen/VwWRBdg

提前致谢

【问题讨论】：

只是好奇，为什么要避免使用 position: absolute？
嗨，您能描述一下最终结果的外观和行为吗？您是否希望图像在用户滚动时保持不变，图像的背景是什么元素（html / body，容器div ...）。您是否希望图像始终显示其全宽，即使在某些设备上底部可能不在视口中？在后一种情况下，您是否希望它创建滚动？我想知道封面是否不会提供更好的“英雄”形象？
我的印象是：absolute 可能会导致问题，无论是本身，还是与尝试保持响应有关，但是，我是一个绝对的初学者，所以请随意如果我被误导，请教育我。
一个 Haworth，我相信所有这些问题都应该通过查看我提供的代码来回答，正如我所说，使用 CSS 就地，图像完全按照我想要的方式响应.您还可以从 codepen 中看到 BG img 是容器 div 的 BG（尽管我认为它不一定是 div）...我希望该文本位于顶部图像的左侧。我希望 Carl 的脸在所有屏幕尺寸下都清晰可见。我相信当我尝试“掩护”时，它搞砸了。
这是我做倾向于使用绝对定位的唯一地方之一。它的范围很窄，所以应该不会太难。

标签： html css image responsive hero

【解决方案1】：

不确定是否 100% 理解了您想要的结果，如果您希望文本位于图像顶部而不使用 <img> 标记，为什么不将内容和图像放在包装器中但不同的div？

我创建了这支笔作为示例： https://codepen.io/mvuljevas-the-selector/pen/zYzbJgO

【讨论】：

感谢 Mauricio 的输入，但是当我说我想要文本“在图像顶部”时，我实际上是指覆盖在顶部，而不是“在上面”。我认为我在这里真正的问题是我看不到如何在不使用填充的情况下保持 BG img 的高度（并保持它的响应），而填充正是将我的字体从 IMG 中踢下来的原因（这不是什么）我想要）。希望这是有道理的？
哦，我想我明白了，这就是为什么你不想使用 <img> 标签现在有意义了，你是否试图将 padding-top 更改为 padding-bottom？将保留您的背景图像纵横比作为背景，并将内容拉到顶部，我已经更新了笔：codepen.io/mvuljevas-the-selector/pen/zYzbJgO
这更近了，但我希望能够定位文本而不必将其绑定到 bg-img padding，因为我需要将文本垂直居中在图像 div 上（大约)，而不是就在那个顶角。我还需要它远离屏幕的左边缘...由于文本 div 的位置由 bg-img 的 padding 属性控制，我无法在不弄乱 bg-img 的 height 的情况下操纵文本的位置.
我必须承认这是一个不常见的场景，你试图实现它的方式，我知道你不想将position: absolute; 用于 BG 容器，但是如何用它来做里面的内容？，我更新了笔，你可以看看，几行CSS就可以控制BG为图像，不用position: absolute;用position: relative;控制里面的内容。
你好 Hacktinium，我们能解决这个问题吗？