我在一个网站上工作,我必须在左侧和右侧裁剪图像并将它们居中。我找到了一个解决方案,其代码如下: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”单元。有谁知道如何解决这一问题?
最佳答案
在img样式中添加object-fit: cover;
似乎可以解决Safari中的问题,并且在Chrome中看起来仍然不错。未经其他浏览器测试
http://codepen.io/panchroma/pen/rLwAJd
关于css - 获取灵活的水平缩放图像以在Safari中工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38200981/