banner图在缩放屏幕的时候始终居中显示不变形
大家在做项目的时候有没有遇到一个问题呢 就是一张图片宽度100% 在缩放屏幕的时候图片会被压缩变形!!!那么怎么才能实现图片始终居中而不被压缩变形呢? 接下来让我带领大家解决这个问题 请看代码↓↓↓↓↓↓↓
第一步:首先写出html的demo
<div class='bannerbox'> <div class='banner'> <img src="../assets/01.jpeg"> </div> </div>
第二步:关键代码当然是css了^_^
.bannerbox { width:100%; position:relative; overflow:hidden; height:500px; } .banner { width:1920px;/*图片宽度*/ position:absolute; left:50%; margin-left:-960px;/*图片宽度的一半*/ }