使背景图像具有响应性 - fullpage.js答案

【问题标题】：Making background images responsive - fullpage.js使背景图像具有响应性 - fullpage.js
【发布时间】：2014-07-30 17:11:26
【问题描述】：

我正在使用fullpage.js 进行视差滚动。当我re-size我的window时，是否可以在自然界中制作背景图像responsive。

https://github.com/alvarotrigo/fullPage.js

以下是我正在使用的示例。 https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html

如果你注意到我的每个section 都有background-size 属性和cover，但是当我re-size 时它仍然没有响应。

#section0,
#section1,
#section2,
#section3{
    background-size: cover;
}

【问题讨论】：

响应式到底是什么意思？您是否希望图像宽度始终适合窗口宽度？
@LeBen 是的......图像应该适合

标签： javascript jquery css fullpage.js

【解决方案1】：

看来我对 fullpage.js 了解不多但我不知道根据您的窗口大小调整图像大小..... 首先下载任何图像，我将其命名为 sa.jpg

<html>
    <head>
        <style type="text/css">
        #box{   
            width:100%;
        }
        <!--This class is added to img element to make it responsive -->
        img.responsive{
            max-width:100%;
            height:auto;
        }
        </style>
    </head>

    <body>
         <div id="box">
             <img src ="sa.jpg" class="responsive"></img>
         </div>
    </body>
</html>

在上面的代码中，我们将图像保存在 #box div 中。我们还为 img 元素添加了响应式命名类。为其分配 100% 的最大宽度值。这允许宽度以适应浏览器宽度的变化。接下来，为类添加一个动态高度属性。

上面的代码是响应 img 元素的..

现在如果你想使用背景图片 css 属性并根据屏幕大小调整图片大小

<html>
    <head>
        <style style type="text/css"> 
        #box{   
            width:100%;
            height:100%;
            background-image:url("sa.jpg");
            background-size:100% auto;
            background-repeat: no-repeat;
        }
        <!--img.responsive{max-width:100%;height:auto}-->
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

【讨论】：

【解决方案2】：

这个最适合我

background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;

【讨论】：