Fluid Images

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.

You can tweet a reply using a link to this page or the hashtag #mot_fluid. (Help?)

Commenting via Twitter

If you have a Twitter account and wish to reply to this post, just tweet what you'd like to say, and make sure to put #mot_fluid somewhere in your tweet.

The gobbledygook beginning with '#' is called a 'hashtag', and makes it easy for this site to search Twitter for your tweet, and display it on the correct page.

Alternatively, you can tweet about this post and include its short URL, http://mottr.am/fluid, and your tweet will be displayed automatically, whether you use the hashtag or not.

If you don't have a Twitter account, and would rather not use the comment form, feel free to send me an email instead: j@ck.mottr.am