views:

3796

answers:

3

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?

A: 

bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?

David Archer
+2  A: 

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.

Willfulwizard
This seems to require the enclosing DIV to be set to a particular width and height value?
Charlie Kotter
See my edit. Putting a div with a set width and height will break what you are trying to do.
Willfulwizard
Thanks for clarifying. Makes sense now. I appreciate you following up.
Charlie Kotter
A: 

thank you so much! works perfectly!