CSS banner圖響應(yīng)式居中顯示的方法
我要評(píng)論在 PC 網(wǎng)站首頁(yè)，banner 圖作為網(wǎng)頁(yè)中最大的一張圖片，在傳達(dá)網(wǎng)頁(yè)的的主要信息的同時(shí)，也吸引著瀏覽者的所有注意力，所以 banner 圖的展示方式直接影響著用戶的體驗(yàn)，今天我們就來聊聊 banner 圖如何在不同尺寸的視口中居中顯示
我們都知道，通過 background-size: cover; 屬性能夠?qū)D片居中顯示，但在窗口拉伸的過程中，圖片往往很隨著拉伸而變得慘不忍睹，所以我們可以將圖片獨(dú)立出來，并通過隱藏圖片兩側(cè)的方式，來達(dá)到 banner 圖在不同尺寸下居中顯示的目的
HTML 結(jié)構(gòu)如下
<div class="banner">
</div>
CSS 樣式如下
body {
overflow-x: hidden;
}
.banner {
width: 1210px;
margin: 0 auto;
}
.banner img {
width: 1920px;
margin: 0 -355px;
vertical-align: middle;
}
當(dāng)視口寬度與圖片寬度同為 1920 px 時(shí)，Nian 糕正好處于視圖居中位置，頁(yè)面效果如下圖所示
width:1920px
當(dāng)視口寬度為 1210 px 時(shí)，Nian 糕依舊在視圖中居中顯示，如下圖所示
width:1210px
本篇的內(nèi)容到這里就全部結(jié)束了，源碼我已經(jīng)發(fā)到了 GitHubBanner response centered 上了，有需要的同學(xué)可自行下載
End of File
行文過程中出現(xiàn)錯(cuò)誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導(dǎo)更多人，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 輪播圖，網(wǎng)頁(yè)上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種，感興趣的朋友一起看看吧2019-11-11
純CSS3實(shí)現(xiàn)帶漸變效果的響應(yīng)式輪播圖特效源碼
這是一款基于純CSS3實(shí)現(xiàn)帶漸變效果的響應(yīng)式輪播圖特效源碼。界面中央是一幅輪播特效圖，圖片右下方是從1到5的圖片焦點(diǎn)序號(hào)。點(diǎn)擊焦點(diǎn)序號(hào)可切換到對(duì)應(yīng)的圖片，同時(shí)在圖片切2019-09-26
jQuery和CSS3實(shí)現(xiàn)堆疊式輪播圖特效
這是一個(gè)通過jQuery和CSS3實(shí)現(xiàn)堆疊式輪播圖特效，先通過css將圖片堆疊到一起，然后通過jquery代碼來控制在切換，簡(jiǎn)單實(shí)用2019-09-03
實(shí)現(xiàn)帶CSS混合模式的JS視覺差輪播圖特效
這是一款實(shí)現(xiàn)帶CSS混合模式的JS視覺差輪播圖特效，使用CSS mix-blend-mode將文字和圖片背景進(jìn)行混合，在點(diǎn)擊時(shí)帶有炫酷的視覺差特效2019-04-15
這是一個(gè)基于js和CSS3的超炫酷輪播圖過渡動(dòng)畫特效，使用TweenMax來實(shí)現(xiàn)，當(dāng)輪播圖切換的時(shí)候，制作炫酷的彈性動(dòng)畫特效2018-12-20純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果
這篇文章主要介紹了純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-15
