Menu
I’m facing a need to have a “cover” background on one of the elements.
What are pros and cons of using CSS background-size: cover vs actual img with object-fit: cover?
211
Img Tag. It is widely known that using the image tag is better SEO practice than using background images because of the screen reader implications.
Best background image size For background images, the best size is 1920 pixels wide x 1080 pixels high. This ideal ratio of 16:9 will fill the surface of the webpage without compromising the quality of the image. In terms of pixels per inch (ppi), the image should be at least 72.
cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain , on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.
Adding a Background to an Image With object-fit: contain # We would benefit from that when also using object-fit: contain . In the example below, we have a grid of images. When the aspect ratios of the image and the container are different, the background color will appear.
In addition to what others have said about compatibility (background-size: cover is supported on all modern browsers, where object-fit: cover is not), an unwanted side-effect of using a div element with background-size: cover is that if the user tries to print your page, a lot of times the image won't be printed as it will be deemed a background by the browser and ignored.
That might not matter to you at all, but it is something to be aware of.
There are some ways to get around this, but I don't know of a single, cross-browser silver bullet method.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
