获取灵活的水平缩放图像在Safari中工作

我正在一个网站上工作，我必须在左右两侧裁剪图像并居中。我发现了一个解决方案，使用此代码：http://codepen.io/anon/pen/dXMrWj 获取灵活的水平缩放图像在Safari中工作

<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” 单位可能。有谁知道如何解决这一问题？

来源

2016-07-05 Jelle

应该没有'vh'问题：浏览器支持（https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility） – Randy

将img样式添加object-fit: cover;似乎解决了Safari中的问题，并且它在Chrome中看起来仍然很好。未经测试的其他浏览器

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

来源

2016-07-05 12:50:15

是的，刚刚发现该解决方案。谢谢！ – Jelle

获取灵活的水平缩放图像在Safari中工作

回答

相关问题