图片铺满div元素不变形,超出部分隐藏,保留中心部分css代码

转自:https://www.cnblogs.com/ymdi/p/15707504.html
需求:图片铺满父级元素,有些图片横向、有些是纵向,图片宽高比不一致,导致不能铺满或者变形。针对这种情况,需要以图片中心位置向四周铺满父级。

我们可以使用css代码中object-fit属性来实现。
object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。
css代码如下:
.div{
width:200px;
height: 200px;
overflow:hidden;
}
.div img{
width:100%;
height: 100%;
object-fit: cover;//重要
}
css代码中,cover值含义为保持原有尺寸比例。但部分内容可能被剪切。

你可能感兴趣的:(css,css,前端,html)