如何让网站banner图通栏显示 自适应屏幕宽度？
发表时间：2021-06-25
文章来源：本站
现在浏览器的分辨率大小不一，为了使网站显得更大气，有震撼感，在网站建设中，经常会使用banner图片通栏显示的。我们可以用以下方法
如果图片需要从数据库获取，我们可以采用，在div中加style的写法：
如果图片是固定的，直接写到css样式表里，这样更符合网页标准：
.test { background: url(images/banner.jpg) no-repeat center center; width: 100%; height:100px; }
注意，这里的图片宽度要大点，按目前的显示器，一般宽度到1920像素就可以适合所以屏幕。设置完后，取消浏览器最大化，把浏览器拉大拉小，可以看到图片永远在中间，浏览器宽度越大，显示的图片宽度就越大，不会变形。
如果图片需要从数据库获取，我们可以采用，在div中加style的写法：
如果图片是固定的，直接写到css样式表里，这样更符合网页标准：
.test { background: url(images/banner.jpg) no-repeat center center; width: 100%; height:100px; }
注意，这里的图片宽度要大点，按目前的显示器，一般宽度到1920像素就可以适合所以屏幕。设置完后，取消浏览器最大化，把浏览器拉大拉小，可以看到图片永远在中间，浏览器宽度越大，显示的图片宽度就越大，不会变形。
相关案例展示查看更多
CopyRight 2026 版权所有 周游国际XML地图
网站备案 粤ICP备2021035801号