Image zoom in, typesetting, cropping, 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;
  }
}

The above code is a normal display of pictures. The effect is that the pictures are displayed in a fixed size, but we know that many pictures are of different sizes, and this display will cause the pictures to stretch and deform.

We hope that the picture will not be deformed, but will be enlarged proportionally and then cropped

The following code fulfills the requirement:

.wmx-article-item__icon {
  margin: 0 10px 0 0;
  width : 245px;
  height: 167px;

  img {
    width     : 245px;
    height    : 167px;
    object-fit: cover;
  }
}

Added an object-fit: cover;

The cover value preserves the original aspect ratio, but the image takes up all available space.

Reference article: http://www.webkaka.com/tutorial/html/2022/0320235/