保持圖像居中，不調整大小，向左和向右剪輯

Question

我有一個背景圖像，可以使用img標記或通過背景圖像進行設置。我希望圖片始終以瀏覽器爲中心。然後，在調整瀏覽器大小時，我希望圖像保持全尺寸，並開始隱藏左右兩邊的溢出。溢出應該在圖像的兩側被裁剪，因此圖像的中心始終位於中心。

Answer 1

添加背景的大小和位置

background-size: cover; 
background-position: center; 

背景尺寸：覆蓋

縮放的背景圖像，使背景區域由背景圖像完全覆蓋要儘可能大。背景圖像的某些部分可能無法在背景定位區域內查看

Answer 2

嘗試這樣的事情，可能需要稍微更改，具體取決於您的頁面佈局。

.parentElement { 
    position: relative; 
    float: left; 
    width: 500px; 
    height: 200px; 
    overflow: hidden; 
} 

.parentElement img { 
    position: absolute; 
    min-width: 100%; 
    min-height: 100%; 
    max-width: 200%; 
    max-height: 200%; 
    top: -999px; 
    right: -999px; 
    bottom: -999px; 
    left: -999px; 
    margin: auto !important; 
    width: initial; 
} 

https://jsfiddle.net/409u4zop/4/

如果你想使用的背景圖片，你回來只是

background-position: center;