Question

我使用了bootstrap 4模板，然后编辑它以适应我的设计。除了一个方面，它几乎完全响应。我有一个背景图像作为主标题图像。除了在移动设备上时，它才会响应。我想知道如何让它填满移动屏幕，同时缩小以显示图像。

＆＃13;

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url(../img/fg-heads-nologo.png);
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px
}

header.masthead h1 {
  font-size: 2rem
}

header.masthead p {
  font-weight: 300
}

@media (min-width:768px) {
  header.masthead p {
    font-size: 1.15rem;
  }
}

@media (min-width:992px) {
  header.masthead {
    height: 100vh;
    min-height: 650px;
    padding-top: 0;
    padding-bottom: 0
  }
  header.masthead h1 {
    font-size: 3rem
  }
}

@media (min-width:1200px) {
  header.masthead h1 {
    font-size: 4rem
  }
}

＆＃13;

<header class="masthead parallax smooth-scroll text-center text-white d-flex col-xs-4">
  <div class="container my-auto">
    <a href="#about"><span></span></a>
  </div>
</header>

＆＃13;

谢谢！

Answer 1

在CSS中使用以下属性

background-size:contain;
background-position:center;

Answer 2

试试这个 - >

＆＃13;

#image {
    float:left;
    width:100%;
    height:400px;
    background: url('https://salemnet.vo.llnwd.net/media/cms/CW/faith/36525-Jesus-Jesussitting-painting-thinkstock.1200w.tn.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

＆＃13;

<div id="image"></div>

＆＃13;

背景图片在移动设备中无法响应

2 个答案: