Background

It is common to find in articles that images can’t expand with your layout. Well, i want to prove that wrong - !?. Yea, don’t go looking at me like am bad, I’ll show you.

Fact

Before I show you, I want you to know that when you zoom your page (text size only), your layout, if properly designed, will expand or contract along with the text. But any image you have on the page will remain intact in size. This is because the unit of measurement for images is the pixel. Every image you put on a webpage is measured in pixel, by default.

Now, sit up

Ok, you got the pixel point. You insert your image either in CSS or in (X)HTML and you specify its dimensions in pixel(width=720px height=450px). Go to your page and zoom. What do you get?

Faithful User Agents

That is what to expect, the image stays fixed in pixels. This is because User Agents believe you know what you are doing when you specify dimension for elements in pixels - don’t you?

So, because of their faithfulness to you, user agents keep your pixels in place as you zoom the page - that is why have use other ‘em’ and ‘%’ if you want to be elastically laid out.

No Trick, Seriously

Yes you’re smart and you’ve figured it out. To make an image expand you specify its dimensions in ‘em’.

An ‘em’ is 16px, by default again. 720px in em will be 42em - divide by value(720px) by 16.

Now, the ‘em’ value is what you use in your dimensions not the ‘px’. It can come in your css file - which is what I recommend.

If you want the dimension to be fixed whatever image gets inserted into the page then you will have to use the !important directive immediately after specifying the width in your selector. Like this:

.expandable img {

width:42em!important;

height:28.125em!important;

}

ZOOM

Now zoom the page to different levels and what do you see? Its that simple it can come in anywhere with any image. But you should consider what is possible with your intended users and make the right decision about the flexibility of your image.

Some stay, some go

Alright, most of the time you won’t need to worry yourself about zoomability of your image, but sometimes its worth the effort - which is no effort at all.

Use it if you must, it makes everything work together. If you don’t need to waste your time on the conversion, just skid away.

Questions?