确保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设置与图片边缘同色的背景色
 
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐