脚本宝典收集整理的这篇文章主要介绍了css如何设置banner图自适应，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在css中，可以使用“background-size”设置banner图自适应，语法“background-Size:cover”；其中cover是指把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

//test.css
.index-banner-top {
    width: 100%;
    background: url(../imgs/guanyu.png) no-rePEat center center;
    height: 210px;
    background-size:cover
}
@media only screen and (max-width: 640px){

    .index-banner-top {
        height: 100px;
    }
}

//test.html
<p class="index-banner-top"></p>

电脑端显示：

手机端显示：

以上就是css如何设置banner图自适应的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css如何设置banner图自适应全部内容，希望文章能够帮你解决css如何设置banner图自适应所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。