DEV Community

Discussion on: What CSS tip do you want to share with others?

Collapse
 
artemartemov profile image
Artem Artemov

love using object-fit: cover; when appropriate. I work a lot with image grids and random crops (thanks editors!) so we gotta make sure it looks decent across the board

Collapse
 
adrianmarkperea profile image
Adrian Perea

Hi, Artem! Can you give more detail on what object-fit: cover accomplishes? (In my head, it kinda sounds like cover background image positioning)

Collapse
 
artemartemov profile image
Artem Artemov

yes pretty much! it is very helpful to preserve aspect ratio for both images and video.

so lets say you have a 2:1 image (and you cannot crop it down manually or via some upload tool) you can use object-fit: cover - so if the container that holds the image is a 1:1, it will not distort but in fact crop outside of the container.

Thread Thread
 
adrianmarkperea profile image
Adrian Perea

Cool!