Object-fit : cover does not work?

I want to fill up the whole parent div with the image in it.
I tried to use object-fit:cover but it does not work…

This is a visual representation of what I am trying to achieve here:

Remove the width of the .card selector, is that what you want?

I want to create this kind of effect. no matter how big or small the parent div is, the image is always displayed in the middle, cover up the whole div.

I think that the source image I choose is too big for object fit…

It looks like you must give a height to the image, otherwise it will expand and you won’t have that effect.

.project_images{
  object-fit: cover;
  width:100%;
  height: 200px;
}
2 Likes

thank you! that worked. I think I will keep this in mind next time I use object fit.

Thank you! Registered to Freecodecamp just to give you +1 x)

1 Like