15

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?

Roy Christo
  • 354
  • 2
  • 13
Runnick
  • 613
  • 2
  • 12
  • 30
  • 4
    background-size: cover is far better supported and just as good in the RWD department. Plus the age-old "don't use the element for backgrounds". – BoltClock Sep 25 '18 at 10:24
  • You might see [this question](https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements) before asking a new one, take look ;) – Driss Baidou Sep 25 '18 at 10:26
  • For one thing, they are used on **different** elements. – Paulie_D Sep 25 '18 at 10:53
  • @Paulie_D my question was edited by someone else: I'm not asking what the difference, I'm asking what are pros and cons of using one over another. – Runnick Sep 25 '18 at 10:56
  • 4
    Which, unfortunately, pushes this into `opinion` territory which is off-topic, – Paulie_D Sep 25 '18 at 10:57
  • 3
    You should really ask about the technical differences. That seems to be a on-topic question. Asking about pros and cons is opinion-based. – BDL Sep 25 '18 at 11:00
  • depends if you want to print the image or not and if you want it to be part of a page for screen readers or not and lastly whether you need to support ie or not (most object fit polyfills fall back to background size anyway) – Pete Sep 25 '18 at 11:19

1 Answers1

11

In addition to what others have said about compatibility (background-size: cover is supported on all modern browsers, where object-fit: cover is not), a potentially 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.

Michael
  • 1,075
  • 1
  • 10
  • 24