Timmargh.me

Make images resize as columns shrink and stretch  7

You may have noticed that this site will squash and stretch with the browser window as you alter its width - from a minimum of 750 pixels up to a maximum of 1390. But did you notice some of the larger images changing size, too? For example, resize your browser window so the centre column gets smaller and watch this image:

The site has been redesigned since this entry so the resizing example no longer works.

See it change? Wonder how it’s done? Well, as you’ve probably guessed, it’s fairly simple.

Before we start, I should point out that any large images I use, e.g. full-size screenshots, are stored in my Flickr account - this is handy because Flickr provides several different sizes of your image and it saves on bandwidth.

So, take the screenshot and upload it to Flickr. Make a note of the image’s full-size URL by selecting ALL SIZES on the Flickr page, selecting Original near the top-right and then copying the URL near the bottom of the screen. Repeat this for the Medium (500 x ?) version of the same image.

In the style sheet, include the following:

img.sizeable { width: 95%; }

This tells images with a class of sizeable to expand to 95% of the width of the column/box it’s in.

When you want to insert the image into your site, use the following format:

<a href="Full-size URL" title="View full-size"><img src="Medium size URL" class="sizeable" style="max-width: 500px;" alt="Screenshot" /><a>

And … that’s about it. The image should shrink if the column it’s in gets less than 526 pixels (500 ≈ 95% of 526) and the user can click it to see the full-size version.

Obviously, you don’t have to use Flickr and you can specify different sizes for your images - these are just the values I use.

Unsurprisingly, this technique will not work with Internet Explorer.

Flickr now state that if you link to a photo stored on their servers then you have to link to the photo’s page on Flickr rather than just the image itself.

Comments