获取灵活的水平缩放图像在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” 单位可能。有谁知道如何解决这一问题?
答
将img样式添加object-fit: cover;
似乎解决了Safari中的问题,并且它在Chrome中看起来仍然很好。未经测试的其他浏览器
+0
是的,刚刚发现该解决方案。谢谢! – Jelle
应该没有'vh'问题:浏览器支持(https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility) – Randy