使背景图片响应 - fullpage.js [英] Making background images responsive - fullpage.js
问题描述
我使用 fullpage.js 进行视差滚动。当我调整大小我的窗口时，可以使背景图片。响应
I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.
https： //github.com/alvarotrigo/fullPage.js
下面是我使用的示例。
https://github.com/alvarotrigo/fullPage .js / blob / master / examples / backgrounds.html
Below is the example i am using. https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html
如果您注意到我的部分有 background-size 属性， cover ，但是当 re -size 。
If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
推荐答案
看看我不知道太多关于 fullpage.js
但我不知道根据你的窗口大小调整图像大小.....
首先下载任何图像，我命名为sa。 jpg
Look i don't know too much about fullpage.js But i don know about resizing image according to your window size..... first of all download any image and i named it 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 element.Assign它的最大宽度值为100％。这允许宽度
调整到浏览器宽度的变化。接下来，向类中添加一个动态高度属性。
In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width to adjust to the browser width changes. Next, add a dynamic height property to the class.
以上代码对img元素有响应。
Above code is responsive for img element..
现在，如果要使用背景图片css属性，并根据屏幕大小调整图片大小
Now if you want to use background image css property and resize your image according to screen size
<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>
这篇关于使背景图片响应 - fullpage.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
