html - 需要帮助在标题图片上获得响应式设计

Question

除了我的横幅/标题之外，我的整个网站都是响应式的，我似乎找不到解决办法。我使用视口(viewport)来提高响应能力，但我的横幅根本没有反应!

这是标题的简单 JSFiddle， https://jsfiddle.net/Syystole/L9r2p9so/19/

HTML

  <meta name="viewport" content="width=device-width, initial-scale=1.0">


<div class="WrapperPage">
        <div id="banner"></div> 
</div>

CSS

.WrapperPage {
    max-width:62em;
    margin:auto;
            }

#banner {
    background-image: url("http://lorempixel.com/400/200/sports/1"); <!./ starts from current directory>
    text-align:center;
    padding:170px;
        }

Answer 1

如果您希望整个图像可见并随视口(viewport)缩放，请结合使用 background-size: cover 拉伸(stretch)图像以适合元素，以及 padding-bottom : 50% 以匹配图像的纵横比，以便始终有空间显示整个图像

.WrapperPage {
  max-width: 62em;
  margin: auto;
}

#banner {
  background-image: url("http://lorempixel.com/400/200/sports/1");
  text-align: center;
  padding-bottom: 50%;
  background-size: cover;
}

<div class="WrapperPage">
  <div id="banner"></div>
  <p>
    body text
  </p>
</div>