9

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}
<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />

Codepen Example

Many other images work fine. In other browsers everything also works as expected.

What can be the problem?

Chrome Version 84.0.4147.89

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
dmtrbrl
  • 101
  • 4

1 Answers1

9

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

Edit for further explanation based on comments from @dgknca:

As @dgknca pointed out, background-position: cover works because the image in this case is not a replaced element, rather the browser gets the image as presented and uses it as a background image

object-fit works on replaced elements such as video, img, iframe and embed (being the most common).

So, in this particular case, it appears that the meta data or other data associated with the actual image was corrupt/malformed/incorrect. So when Chrome interpreted the actual image data for this replaced element, it was trying to do object-fit: cover - to Chrome the image was horizontal and not vertical, so it was being stretched or rather "fit" incorrectly.

The link to the MDN article about replaced elelemts:

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

Here's the imporant part:

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

disinfor
  • 10,865
  • 2
  • 33
  • 44
  • I can't understand how this works correctly with `background-size:cover` with his image https://jsfiddle.net/msfnh7rz/ – doğukan Jul 21 '20 at 17:50
  • 1
    I think it's the way Chrome was reading some of the image data and how it uses `object-fit` - since I believe `object-fit` handles how data gets displayed differently than `background-size` - since, I believe, the actual file is being manipulated in an `img` tag - since it's the content when using `object-fit`. – disinfor Jul 21 '20 at 17:53
  • 2
    @dgknca I think the opening paragraphs on the MDN site sum it up pretty well - why `object-fit` works differently than `background-image`: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element – disinfor Jul 21 '20 at 17:56