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

我們都知道，通過 background-size: cover; 屬性能夠?qū)D片居中顯示，但在窗口拉伸的過程中，圖片往往很隨著拉伸而變得慘不忍睹，所以我們可以將圖片獨立出來，并通過隱藏圖片兩側(cè)的方式，來達到 banner 圖在不同尺寸下居中顯示的目的

HTML 結(jié)構(gòu)如下

CSS 樣式如下

當(dāng)視口寬度與圖片寬度同為 1920 px 時，Nian 糕正好處于視圖居中位置，頁面效果如下圖所示

width:1920px

當(dāng)視口寬度為 1210 px 時，Nian 糕依舊在視圖中居中顯示，如下圖所示

width:1210px

本篇的內(nèi)容到這里就全部結(jié)束了，源碼我已經(jīng)發(fā)到了 GitHubBanner response centered  上了，有需要的同學(xué)可自行下載

End of File

行文過程中出現(xiàn)錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導(dǎo)更多人，以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。