Question

如何使我的图像适合浏览器宽度的宽度。当我重新调整我的浏览器大小时，我希望图像根据浏览器宽度重新调整大小。

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

/* Defining each sectino background and styles 
* --------------------------------------- */
#section0{
    background-image: url(http://demos.pixelworkshop.fr/panoramic/img/background/f.jpg);
}
#section1{
    background-image: url(http://demos.pixelworkshop.fr/panoramic/img/background/f.jpg);
}
#section2{
    background-image: url(http://demos.pixelworkshop.fr/panoramic/img/background/f.jpg);
}
#section3 h1{
    color: #fff;
}

以下是我的代码... http://codepen.io/anon/pen/lpGkj?editors=110

如何在重新调整大小时将images宽度设置为等于浏览器width。

Answer 1

在那支笔中，你的背景没有显示，因为它们没有内容，因此它们的高度为0。

background-size: cover是一个很好的解决方案，但您也可以使用

background-size: 100% auto即使容器的纵横比（宽度/高度）小于背景图像的纵横比，也要将背景宽度保持为100％。

Answer 2

您必须定义div：

的位置

#section0,
#section1,
#section2,
#section3{
 background-size: cover;
 position:fixed;
 top:0;
 bottom:0;
 right:0;
 left:0;
 width:100%;
 height:100%;    
}

这是工作Fiddle。

使用Css封面背景时，请记住跨浏览器compatibility。

Answer 3

我只是回答这个问题你可以在Making background images responsive - fullpage.js查看如果有任何关于响应的问题，你可以在评论中提问......

使我的图像适合浏览器的宽度

3 个答案: