pc的banner图居中显示

 

确保pc中banner图居中显示

Git项目地址Git

<div class="banner">
    <img src="./banner33.jpg" alt="">
</div>

.banner {
      position: relative;
      height: 615px;
      width: 100%;
      // background-color: #eee; // 与图片边缘同色的颜色
}
.banner img {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -960px;
 }

• 其中height的高度为图片高度，为了让图片不发生形变，margin-left的值是图片宽度的一半。
• 为了更好的显示效果，当网页宽度超出图片的宽度后，可以给.banner设置与图片边缘同色的背景色