1.背景图片方式
这种方法是利用css背景图方式,让图片垂直水平居中显示,不会拉伸变形。
.box {
width: 400px;
height: 400px;
background: url("img") no-repeat center center;
background-size: cover;
}
2.CSS3的object-fit属性
object-fit有五个值
fill — 默认,不保证保持原有的比例,根据宽高拉伸或者压缩填满。
contain — 保持原有尺寸比例,内容被缩放,上下或者左右有留白。
cover — 保持原有尺寸比例,但部分内容可能被裁切
none — 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down — 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,上下或者左右有留白,取决于它们两个之间谁得到的对象尺寸会更小一些。
<img class="img" src="img" alt="">
.img{
width: 400px;
height: 400px;
object-fit: cover;
}