Как получить изображение для обрезки в центре

Question

Я сделал мои сообщения миниатюрами изображений полной ширины и отзывчивыми. Потому что они были настолько высокими, что я должен был обрезать на 600 пикселей. Проблема в том, что по мере увеличения экрана изображения обрезаются вверху, а не в центре изображения, как я хочу. Есть ли способ сделать обрезку изображений в центре? Я не хочу использовать 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