關於CSS banner圖響應式置中顯示的方法

本篇文章主要介紹了CSS banner圖響應式置中顯示的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在 PC 網站首頁，banner 圖作為網頁中最大的一張圖片，在傳達網頁的的主要資訊的同時，也吸引著瀏覽者的所有注意力，所以 banner 圖的展示方式直接影響著使用者的體驗，今天我們就來聊聊 banner 圖如何在不同尺寸的視口中置中顯示

我們都知道，通過 background-size: cover; 屬效能夠將圖片置中顯示，但在視窗展開的過程中，圖片往往很隨著展開而變得慘不忍睹，所以我們可以將圖片獨立出來，並通過隱藏圖片兩側的方式，來達到 banner 圖在不同尺寸下置中顯示的目的

HTML 結構如下

<p class="banner">    ![](img/banner.jpg)</p>

CSS 樣式如下

body {    overflow-x: hidden;}.banner {    width: 1210px;    margin: 0 auto;}.banner img {    width: 1920px;    margin: 0 -355px;    vertical-align: middle;}

當視口寬度與圖片寬度同為 1920 px 時，Nian 糕正好處於視圖置中位置，頁面效果如所示

width:1920px

當視口寬度為 1210 px 時，Nian 糕依舊在視圖中置中顯示，如所示

width:1210px

本篇的內容到這裡就全部結束了，源碼我已經發到了 GitHubBanner response centered 上了，有需要的同學可自行下載

End of File

行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！