Mottr.am

Fluid Images

on

I rejigged the CSS for One Thing Well last night, making it semi-fluid, responsive to changes in browser window width and better suited to viewing on iPhones and iPads.

I ran into one problem: how to resize wide images for smaller browser windows without affecting small images?

Handily, when Tumblr resizes large images, it appends the width of an image to its filename–eg.,tumblr_guagfduyfa_500.png–so I could use CSS attribute selectors:

img[src$="_500"] {
width:100%;
max-width:500px;
}

img[src$="_400"] {
width:100%;
max-width:400px;
}

Now, if the width of the containing <article> tag drops below 400px or 500px, the image will shrink to fit in all modern browsers.