无法设置响应式 CSS 背景图像的样式答案

【问题标题】：Unable to style responsive CSS background image无法设置响应式 CSS 背景图像的样式
【发布时间】：2015-11-20 07:14:42
【问题描述】：

我有一个带有背景图像的 div，它在移动设备上显示不同的图像，但我很难设置图像响应尺寸。目前，我不得不手动设置宽度和高度，这是我试图避免的。如果我使用 100% 作为宽度并使用 100% 或 auto 作为高度，则图像根本不会显示。

标记：

<div id="mts-popup" class="white-popup mfp-hide wow slideInDown animated" data-wow-duration=".5s">
<h2>MTS Collective</h2>
<div class="left-half">
<div class="popup-screenshot" id="mts-screenshot"></div>
</div>
</div>

CSS：

.white-popup {
  position: relative;
  background: #fff;
  padding: 20px;
  width: 100%;
  max-width: 1160px;
  margin: 30px auto;
  border-radius: 5px;
  text-align: center;
}
.white-popup .left-half, .white-popup .right-half {
  margin: 20px;
}
.white-popup .left-half {
  width: 50%;
  float: left;
}
.white-popup .right-half {
  width: 40%;
}
.white-popup .popup-screenshot {
  width: 600px;
  height: 456px;
  background-size: 100% 100%;
}
.white-popup #mts-screenshot {
  background-image: url("../img/portfolio/mts-browser.png");
}
div#mtsm-popup .left-half {
  width: 30%;
}

任何帮助将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

因为它没有任何宽度和高度。指定宽度和高度，它将开始显示图像。

  .white-popup #mts-screenshot {
     background-image: url("../img/portfolio/mts-browser.png");
     width:200px;
     height:200px;
  }

【讨论】：

目前在.white-popup .popup-screenshot上手动设置宽高，也就是同一个div。我试图避免使用像素。

【解决方案2】：

add other background properties.
background-position,bg-repeat,bg-color or by shorthand property of background.

Set,

.white-popup {
    width: 1160px;
    max-width: 100%;
}

【讨论】：

【解决方案3】：

据我所知，您已将父容器 .white-popup 设置为相对位置，这是一种很好的做法。所以，将你的左半边和右半边设置为位置：绝对。然后，您可以使用它们相对于父容器 .white-popup 的位置，并且它们应该保持相对于它的位置。例如，对于 .left-side，您可以执行类似 left: 2%, top: 10% 和 .right-side left: 55%, top: 10% 的操作。两者宽度为 40% 左右。您可以尝试使用它，但您应该会找到更简单的方法。

一切顺利！

【讨论】：

@mario 这个问题有什么更新吗？希望你解决了！
不幸的是，还没有。我仍在努力理解这个问题。