October 6, 2012 in Mobile Web Design, Responsive Web Design

Responsive Web Design: Responsive Images

Flexible images allow the imagery of your website to respond to the device width. let’s say you have an image width of 600px, that’s great for a large monitor, but when viewed on a mobile device with a 320px width screen the image would overflow its containing element.

Big problem! so, we need a rule that prevents images from exceeding the width of their container element. Luckily there is such rule in CSS (Cascading style sheets) that will allow the image to stretch to 100% of it’s containing element;

img{max-width: 100%;}

We can also use the same rule for other media; video, embed, and objects;

img, video, embed, object {max-width: 100%;}

It’s worth noting that some older web browsers like Internet Explorer 6 do not support max-width, but you can use width instead:

img, video, embed, object{width: 100%;}

It’s also worth noting that fluid image techniques are still being explored and I am sure a more robust solution will arrive, I personally think a new HTML element needs creating and have heard other designers touting that a new Picture HTML element could help.

of course you could always factor in your image sizing into the design process itself and have images no wider than 300px, meaning they would display correctly on screen small sizes and desktops.

About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply