CSS object fit property

There is a fairly new property in CSS called object-fit. It works in conjunction with display: flex and object-position to allow you to control how images and videos fill the space provided by their containing elements.

[marie-elizeventer]

I have been struggling to understand this for a week now, and you made it very clear in a few minutes. Thanks Steve!

[electricviolin]

You just helped me figure out something I've been struggling with for days. Thank you

[alvarogomez]

Thank you for sharing! I have been struggling with this, as I did not realize that the parent element needs to be set to flex! There is one thing I am not quite sure I understand, though. Why do the width and height for the image need to be stated? Is there a way to simple have the image use the available width in % ? Thanks again! You have a new subscriber :)

[TroenderTass]

Hey, do you know if there is a way of getting the outline of the image when you're scaling it down? I basically need to re-position an absolutly positioned button on top of the image, and when scaling down it will obviously still stay where i positioned it in the image tag, but would like to position it according to the outline of the rendered image, and not the image tag. Any way of doing this?

[thisisnotagoodyear]

I hope u remmber me....i am stuck on a image slider program in Js...i have made a working slider when onmouseover on one thumbnail. But i want all thumbnails to show their own sliders. My mind is blank on it for