鍍金池/ 問答/HTML/ 怎么讓超出屏幕的頁面部分在屏幕兩側(cè)平均分配？

怎么讓超出屏幕的頁面部分在屏幕兩側(cè)平均分配？

怎么讓超出屏幕的頁面部分在屏幕兩側(cè)平均分配？
Banner圖片寬度肯定要超出屏幕寬度，設(shè)置寬度后，給banner設(shè)置margin：0 auto;
當(dāng)屏幕寬度大于等于圖片寬度時(shí)，圖片會(huì)劇中，但是小于圖片寬度之后，就會(huì)從圖片的左端開始顯示，右側(cè)超出部分在右邊看不到，圖片不居中了。
怎么才能使屏幕寬度小于banner寬度時(shí)，banner居中顯示？

回答
編輯回答
薔薇花

這時(shí)候需要 css: object-fit: cover，這個(gè)屬性所需的 html 結(jié)構(gòu)也只有一層：

    <img class="banner-img" src="blah">
    .banner-img {
        height: 420px;
        width: 100%;
        object-fit: cover
    }

這樣一來就自動(dòng)居中了～

2017年10月28日 10:02
編輯回答
尐懶貓

采用背景圖片，background居中

2017年5月31日 13:24