Question

我的整个网站都响应，除了我的横幅/标题，我似乎无法找到它的修复程序。我使用视口进行响应，而我的横幅根本没有对它做出反应！

这是一个简单的标题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

如果您希望整个图像可见并使用视口缩放，请使用background-size: cover的组合来拉伸图像以适合元素，并使用padding-bottom: 50%以匹配图像的宽高比这样就可以显示整个图像的空间

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: