如何讓圖像在中心進行裁剪

Question

我製作了我的完整寬度和響應的縮略圖圖像。因爲它們很高，所以我把它剪成600px。問題是，隨着屏幕變大，圖像會在頂部切割，而不是在我想要的圖像中心。有沒有辦法讓圖像在中心進行裁剪？ 我不想在這裏使用background-image。

這是fiddle。

.large-front-thumbnail { 
 
position: relative; 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.large-front-container { 
 
    max-height:600px; 
 
    overflow: hidden; 
 
}

<div class="large-front-container"> 
 
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail"> 
 
</div>

Answer 1

.large-front-thumbnail { 
    position: relative; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    transform: translateY(-50%); /* add this line to move your picture 50% up*/ 
} 

在所有瀏覽器使用：

 transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 

但我建議你使用background-image情況進行了說明here