If you add an image to a website, it automatically respects the aspect ratio of the image.
If you adjust both the inline-size and block-size, or set a contrary aspect-ratio, the image warps. The developer then applies object-fit, and sometimes object-position, to restore proper behavior (because nobody wants a warped image).
We’ve all done this dance thousands of times.
So, I’m here to ask: Why don’t we all stop dancing?
I recently added this to the Automatic.css reset stylesheet:
img {
object-fit: var(--object-fit, cover);
object-position: var(--object-position, 50% 50%);
}
Code language: CSS (css)This sets all images to object-fit: cover; and object-position: 50% 50%; by default, using a custom property with a fallback.
I’m arguing for this as a standard because it has no effect on images added to a website until, and only until, their aspect ratio is manipulated. And, when aspect ratio is manipulated, the developer is going to want to manipulate object-fit and object-position nine times out of ten, so why not already have it set?
The use of custom properties with fallbacks allows you to set alternative values for each property without having to override the default with a new instruction.
4 comments
Steve Wilkison
Newbie question. What is the “Automatic.css reset stylesheet” you refer to? Does this mean this code is now a part of ACSS? Or is the “reset stylesheet” something else, something that I must add this to manually myself? Thanks for any insight.
Dahunsi
Works very well for me. I have always wanted this as a default. We should however me mindful that this is best suited for images that have aspect ratios determined by a container/div/block/section….
Jim Hummel
It sounds entirely reasonable and will only come into play if one setting (aspect ratio) is changed. The premise of ACSS is to save time and enhance design consistency and this change fits nicely with that, IMHO.
The caveat is if it’s hidden, it’s easy to forget about and therefore you’re chasing the ghost you can’t see.
Joe Fletcher
Seems like a reasonable, time-saving, design-saving default to me.