Flexible horizontale Skalierung von Bildern zum Arbeiten in Safari

Question

Ich arbeite an einer Website, wo ich Bilder auf der linken und rechten Seite beschneiden und zentrieren muss. Ich fand eine Lösung für dieses, mit diesem Code: 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%; 
} 

Nur nicht in Safari funktioniert, ist vermuten, weil die "VH" Einheit vielleicht. Kann jemand das beheben?

Answer 1

Hinzufügen von object-fit: cover; zu den img Styling scheint das Problem in Safari zu beheben und es sieht immer noch gut aus in Chrome. Ungeprüfte in anderen Browsern

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