使用css实现图片填充容器后居中
在图片展示的过程中,当我们在处理未知宽高的图片时,很多时候图片要么变形,要么只占了空间的一半,要么剧中,上下留白,左右留白,感觉很不好看。
先看效果是不是你想要的:
原图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200708172142488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTkwMzIy,size_16,color_FFFFFF,t_70)
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200708172059824.png)
css代码
div{
width: 100px;
height: 100px;
}
div > img{
position: static;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}