使绝对定位的背景图像具有响应性答案

【问题标题】：Make Absolutely positioned background images responsive使绝对定位的背景图像具有响应性
【发布时间】：2021-05-19 11:07:04
【问题描述】：

我目前有两张背景图片，一张相对位于另一张绝对定位的图片下方。这会产生如下结果：

我注意到，容器包装器具有 90px 的 padding-top 属性，但绝对定位的背景图像完全忽略了这一点。我也无法将 div 的宽度或高度设置为 100%，看来我必须将高度或宽度设置为固定高度。

想要的结果 我想要实现的结果是，随着屏幕尺寸的缩小，图像也会缩小，并且绝对定位的 div 会附着在父容器的填充和边距上。如果这是可能的，我不确定。

我的代码JSX代码如下：

    <div className="App">
      <div className='h-ctr-outer'>
      <div className="h-btm-par">
        <div className="h-btm-overlay-ctr">
          <div className="h-btm-img-1"></div>
          <div className="h-btm-overlay"></div>
        </div>

        <div className="h-btm-img-2"></div>
      </div>
      </div>
    </div>

我的css代码如下：

.App {
  max-width: 1280px;
  padding: 0 1rem;
  margin: 0 auto;
}

.h-ctr-outer {
  padding-top: 90px;
}

.h-btm-par {
  position: relative;
}

.h-btm-par {
  position: relative;
}

.h-btm-img-1 {
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/uzZcw9L.jpg");
  background-size: cover;
}

.h-btm-overlay-ctr {
  position: relative;
}

.h-btm-overlay {
  position: absolute;
  box-sizing: border-box;
  height: 569px;
  width: 480px;
  top: 0;
  right: 0;
  left: 0;
  background-color: #141414bf;
}

.h-btm-img-2 {
  position: absolute;
  bottom: 59px;
  left: 59px;
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/T5MiFKu.jpg");
  background-size: cover;
  padding: inherit;
  margin: inherit;
  box-sizing: inherit;
}

@media only screen and (max-width: 1280px) {
  .App {
    max-width: 1280px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 980px) {
  .App {
    max-width: 980px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}

以下链接包含用于调试的代码沙箱！ https://codesandbox.io/s/competent-haze-omf57?file=/src/styles.css:0-1029

我们将不胜感激任何和所有建议

【问题讨论】：

想要的结果是什么？
我相信我在问题中已经说过了：我想要实现的结果是，随着屏幕尺寸的缩小，图像也会缩小，并且绝对定位的 div 遵循填充和边距父容器。如果这是可能的，我不确定。

标签： javascript css reactjs sass node-sass

【解决方案1】：

例子：

<html>
 <div class='wrapper'>
    <img src='whatever' class='wrapper_img'>
 </div>
</html>

上面的代码包含页面的html。在此代码中，图像被包装在 div 包装器下。我要做的是在绝对位置时将图像的属性也应用到 div。

CSS：

.wrapper {
    position: absolute;
    height: 10%;
    width: 10%;
}
.wrapper_img {
    position: absolute;
    height: 10%;
    width: 10%;
}

我想说的是，对于具有绝对位置的图像，使用 div 不会做任何事情。将图像包装在 div 中是没有用的，而且是浪费时间。相反，您可以仅将属性应用于图像。并使用@media 查询来改变它在手机中的宽度。

如果你还是不明白。告诉我。

【讨论】：

如果可能的话，你能否给我提供一个代码沙箱分叉的例子。我相信我明白你在说什么，但我想确保我明白

【解决方案2】：

图像会忽略这一点，因为它是绝对的，但包裹它的 div 的位置是静态的。要获得您正在寻找的结果，您需要将 wrapper 的位置更改为绝对并应用图像的相同属性。

【讨论】：

你能不能提供一个例子