Safari에서 작동하도록 유연한 가로 크기 조정 이미지 가져 오기

Question

왼쪽 및 오른쪽에서 이미지를 자르고 가운데에 배치해야하는 웹 사이트에서 작업 중입니다. 이 코드와, 이것에 대한 해결책을 발견 : 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%; 
} 

를 만은 사파리에서 작동하지 않습니다, 때문에 "VH"단위 어쩌면 가정이다. 누구든지이 문제를 해결하는 방법을 알고 있습니까?

Answer 1

img 스타일링에 object-fit: cover;을 추가하면 Safari에서 문제가 해결되는 것처럼 보입니다. 여전히 Chrome에서는 좋게 보입니다. 다른 브라우저

에서 테스트되지 않은

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