Question

I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.

Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there – is there a way to also do this in a CSS flow layout?

Answer 1

A quick test shows that this:

<img class="test" src="testimage.jpg" />

combined with:

img.test { width: 50%; }

Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.

As for resizing based on vertical changes, it doesn’t work the way you would like, at least not consistently. I tried:

img.test { height: 50%; }

In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don’t have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.

EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.

Think of it this way:

• body is 100% of window size.
• img is 50% of body.
• img is 50% of window size.

Now suppose I add a div. like this…

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Then

• body is 100% of window size.
• div is 100px, ignoring body width.
• img is 50% of div.
• img is 50px, regardless of window size.

If the div has “width: 100%” though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.