通过object-fit进行图片等比例缩放
object-fit 属性有以下几种值:
contain:图片等比例缩放以完全填充容器,同时保持图像的宽高比。
cover:图片等比例缩放以完全填充容器,但可能会裁剪图片。
fill:图片拉伸以填充容器,忽略图像的宽高比。
直接上代码
.list_middle_photo {
width: 218rpx;
height: 218rpx;
margin-bottom: 24rpx;
img {
width: 218rpx;
height: 218rpx;
object-fit: cover; /* 图片将覆盖整个容器,但可能会被裁剪 */
border-radius: 16rpx;
}
}
缩放前
缩放后
虽然图片裁剪了,但是比之前舒服多了
wx朋友圈也是类似操作