DEV Community

Cover image for Responsive, semantic images with CSS

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 {...
Collapse
 
cristiannebunu profile image
Cristian N

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.

Collapse
 
hugo__df profile image
Hugo Di Francesco

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)

Collapse
 
naz profile image
Nazim Jamil-Mir

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

Collapse
 
hugo__df profile image
Hugo Di Francesco

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

Collapse
 
wesnetmo profile image
Wes

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