Question

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

标记式：

<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%;
}

任何帮助都会非常感激！

Answer 1

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

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

Answer 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%;
}

Answer 3

从我所看到的你已经设置了你的父容器，.white-popup作为位置相对，这是一个很好的做法。因此，将左半部分和右半部分设置为绝对位置。然后，您可以使用相对于父容器的位置播放.white-popup，它们应保持相对于它的位置。例如，对于.left-side，你可以做左边的事情：2％，top：10％和.right-side left：55％，top：10％。宽度均为40％或者什么的。你可以玩它，但你应该找到一些更容易的东西。

一切顺利！

无法设置响应式CSS背景图像

3 个答案: