In my recent development projects with Themelet, I found a common problem of placing images in different sizes of container. Each recent post widget had different image container size and some of the images were repeating. I didn't had to find much on Google because `object-fit` and `object-position` are most common solution to this problem. Let us dig into them with practical examples with codes.
`object-fit` basically used for images and videos under the content box of unknown height and width to make sure the correct sizing with proper aspect ratio. It is used with `object-fill` property which is later described in this article in detail. `object-fit` make sure that your object covers the content box in a way you want it. Before we move on each use cases, make sure you are watching the demos as per browser support.
<object-fit>: fill | contain | cover | none | scale-down
This value let the user see the whole image instead of just a part of it, in a space provided. I would never recommend using this property to display your portfolio, neither the images with faces in them, doing so will change the faces and figures in the image. The most commonly use case is the home page of blog where single image is shown with each blog post, this is where we have limited space but image that can be resized without any problem.
Here is what different values react in browser.