Object-fit : cover does not work?

HTML-CSS
1

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:

09%20AM
09%20AM789×480 77.8 KB

2

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

3

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.

4

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

5

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
6

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

7

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

1 Like