使背景图像响应

Making background images responsive - fullpage.js

本文关键字：响应 图像 背景      更新时间：2023-09-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;
}

看，我不太了解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>
在上面的代码中，我们将图像保存在#boxdiv中，并且我们还为img元素添加了响应式命名类。将max-width值设置为100%。这允许宽度以适应浏览器宽度的变化。接下来，给这个类添加一个动态height属性。

上面的代码是响应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>

这个最适合我

background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
相关文章：