Responsive, semantic images with CSS

Hugo Di Francesco on July 05, 2018

CSS tip: object-fit your images. To have an image that doesn't try to stretch to its width/height the classic CSS is as follows: .thumbnail { ... [Read Full]
markdown guide
 

Too bad object-fit works poorly in internet-explorer 9
Check github.com/bfred-it/object-fit-ima... For a good polyfill

 

I haven't really worked on enterprise apps/sites but I can tell you I have ignored ie9 for years for all my css work. And what's more, I am beginning to think that ignoring ie11 might be a good idea as well. Looking at caniuse, I don't think it's a good idea to waste time on making an app/site compatible with old, very low usage versions of browsers.

 

object fit degrades ok anyways, the image will be stretched, but I remember the days when background-image would result in a blank block in legacy browsers of the day (and you would have to polyfill that)

 

My clients still want some fidelity in older browsers. Does not take much time either.

I think it is a trade off you have to make, quality is more important for me

 

MSIE9 is ancient! only "modern" browser having problems with object-fit is MSIE11 afaik, and that's very low in usage anyway.

 

It's not responsive if you are fixing the height and width.

 

That's true, I guess it still works if one of the height or width isn't fixed (or is a percentage)

code of conduct - report abuse