<div className={styles['wmx-article-item__icon']}>
<img
src={
props?.item?.coverImage
? props?.item?.coverImage
: require('@/assets/article.png')
}
/>
</div>
.wmx-article-item__icon {
margin: 0 10px 0 0;
img {
width : 245px;
height : 167px;
}
}
上面的代码就是一个正常显示图片的,这样的效果是,图片按照固定的大小显示,但是我们知道很多图片的大小不一,这样显示会导致图片伸缩变形。
我们希望图片可以不变形,而是,等比例放大,然后裁剪
下面的代码就实现了要求:
.wmx-article-item__icon {
margin: 0 10px 0 0;
width : 245px;
height: 167px;
img {
width : 245px;
height : 167px;
object-fit: cover;
}
}
加了一个 object-fit: cover;
该cover值保留原始纵横比,但图像占用所有可用空间。
参考文章:http:// www .webkaka .com /tutorial/html/2022/0320235/