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設置與圖片邊緣同色的背景色