Получение гибких горизонтальных масштабирующих изображений для работы в Safari

Question

Im работает на веб-сайте, где мне нужно обрезать изображения с левой и правой стороны и центрировать их. Я нашел решение для этого, с помощью этого кода: http://codepen.io/anon/pen/dXMrWj

<div class='container'> 
    <img src='https://source.unsplash.com/category/nature/800x1000/daily'> 
</div> 

-

body { 
    margin: 0; padding: 0; 
} 

.container { 
    width: 40%; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

img { 
    height: 100%; 
} 

Только он не работает в Safari, это могут себе позволить, потому что "VH" блок может быть. Кто-нибудь знает, как это исправить?

Answer 1

Добавление object-fit: cover; к стилю img, кажется, устраняет проблему в Safari и все еще выглядит хорошо в Chrome. Непроверенные в других браузерах

http://codepen.io/panchroma/pen/rLwAJd