SharePoint, Responsive Design and Images

One of 3 key elements to a responsive design is flexible images.   Flexible meaning as the viewport changes, so should the ratio of your image.   Luckily accomplishing this is quite easy and it works the same in SharePoint as in any website.  First, you need to shake off the old habit of applying a width and height to <img> tags and instead you will want to control the size of your image with simple CSS.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Image max-width:100% and height:auto works in IE7, but not in IE8. To fix this, you need to add width:auto\9 for IE8.

Good Luck,

Shane

Shane Perran Responsive Design, User Experience and SharePoint SME

You may also like...

I would love to hear from you.

%d bloggers like this: