macos - CSS object-fit cover is stretching a particular image in Chrome on Mac

Question

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />

Answer 1

It's because the image itself is saved incorrectly or malformed in someway.

I noticed this when I downloaded the original image to my computer, the preview was showing horizontal despite the image dimensions being in portrait orientation (2208 x 2944).

I opened it in Preview rotated it back to what it should be and saved it. I put it up on imgur to grab a link to use:

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

<img src="https://i.imgur.com/8OLakxR.jpg" />