我在一个网站上工作,我必须在左侧和右侧裁剪图像,并将它们居中。我找到了一个解决方案,使用以下代码: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”单位可能是假定的。有谁知道如何解决这个问题?
答案 0 :(得分:1)
将object-fit: cover;
添加到img样式似乎解决了Safari中的问题,它在Chrome中看起来仍然很好。在其他浏览器中未经测试