图片 等比放大 排版 裁剪 css

      <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/