1
<div style="border: 3px solid black; width: 200px;">
    <img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: cover;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
  />

  </div>

This image has an original width of 1200px and a height of 674px.

As far as I understood, object-fit fits the content area of the img box itself, right? This property is not used to snap to the containing box (in this case the div), right?

The question then is, does object-fit consider the containing block?.

Even in this example it goes out of the div (overflow) that's why the doubt arose, since in the definition of object-fit they advertise it as being used to fit the container, but I'm not sure what container they are talking about?

2 Answers2

0

object-fit does not depend on your containing div. It only depends on the height and width of the image. As object-fit does not depend on the containing div, that's why in your example it goes out of your containing div.

Asif Jalil
  • 622
  • 5
  • 15
  • Ok, so, object-fit only affects how the image is displayed within the "bounds" of img, consequently, it only makes sense to use it when you use height and width for an image, right? –  Aug 26 '22 at 15:03
-1

The object-fit property does not consider the containing block.

The object-fit property applies only to replaced elements (elements whose representation is outside the scope of CSS) such as an <img> and <video>.

object-fit accepts similar (but not the same) values as the background-size property, sizing the replaced content to fit within the element's content box.

Luke
  • 406
  • 1
  • 11