Question

正如标题所说，我的背景图像没有响应。我申请了课程＆＃34; img-responsive＆＃34;到我的页面标题。但是图像不会随页面缩小。任何想法？

<div class="jumbotron">
   <div class="page-header" class="img-responsive">
   </div>
  </div>
</div>

CSS：

.page-header {

  margin-right: 70px;
  background-image: url("../img/test.png");
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
  max-width: 100%;
  height: auto;
  height: 200px;
  width: 700px;
  margin-left: 333px;

}

Answer 1

使用background-size:cover;，然后只要您在容器上设置max-width:100%;，就会在达到700px以下时调整大小。此外，不需要img-responsive类，因为那是img元素。

.page-header {
  background-image: url("https://placeimg.com/640/480/nature");
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
  height: 200px;
  width: 700px;
  max-width:100%;
}

<div class="jumbotron">
   <div class="page-header"></div>
</div>

Answer 2

.img-responsive适用于img s，而不是普通元素。 .page-header上的固定高度/宽度使该元素无法响应。如果您希望该元素具有响应性（然后后台将响应，因为您正在使用响应式background-size），那么请在{{上使用相对单位（％，em，rem，vh，vw等） 1}}而不是固定（px）单位，或使用一些.page-header查询。

Answer 3

将宽度和高度应用为窗口宽度的百分比。假设您想要700px width，如果窗口宽度为1000px，则写入

width: 70%;

背景图像没有响应

3 个答案: