使用css实现图片填充容器后居中
在图片展示的过程中,当我们在处理未知宽高的图片时,很多时候图片要么变形,要么只占了空间的一半,要么剧中,上下留白,左右留白,感觉很不好看。
先看效果是不是你想要的:
原图
效果图
css代码
div{
width: 100px;
height: 100px;
}
div > img{
position: static;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}