將內嵌塊元素縮放到中間而不是左側

Question

因此，我已將此佈局在桌面屏幕中正常工作：請查看頂部圖像。

但是，當移動佈局/它放大變成這樣：（看中間的圖像）。

所以我想實現的是圖像被放大到像背景大小覆蓋行爲中心。 （看底部圖像）

任何人都可以幫助我解決這個佈局問題嗎？ 在此先感謝。

Answer 1

使用flexbox來解決這個問題。

.center { 
 
    display: flexbox; 
 
    justify-content: center; 
 
}

應用此.center類容器盒。

查看此link瀏覽器支持flexbox。

Answer 2

可以使IMG絕對和添加

img{ 
    left:0; 
    right:0; 
    margin: auto; 
    overflow:hidden; 
}