Question

我试图从头开始创建一个响应式网站，而不使用像bootstrap这样的任何框架。我在我的网站上有一个横幅，我已将背景图像设置如下

<body>
    <div id="pagewrap">
        <div class="test">
            <div class="headers">
                <div class="logo">
                    <a href="#"><img src="images/logo.png" alt="Site Logo"/></a>
                </div><!--logo-->
                <div class="nav"></div><!--nav-->
                <div class="slider_content"></div><!--slider_content-->
            </div><!--header-->
        </div>
    </div><!--pagewrap-->
</body>

.headers {
    background-image:url(images/banner.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    width:100%;
}

当我向div标题应用高度时，会显示图像，但它在移动设备中的高度也相同，但看起来不太好。如何使此响应以使背景图像根据设备分辨率进行缩放。

Answer 1

尝试应用填充百分比而不是固定高度。

所以padding-bottom:50%;并将封面更改为background-size:100% auto;

让我知道它是怎么回事我认为这就是我之前的做法。

Answer 2

您是否尝试使用百分比值？高度100％的东西或者您可以尝试使用vh属性。但是当你想使用vh时，请确保你因为浏览器支持而使用jQuery：

var viewHeight = $( window ).height();
  $('.element').css('height', viewHeight);

Answer 3

这可能对您有帮助，Demo

FragmentA

在CSS中使背景图像响应

3 个答案: