Previous Message
Next Message

[css-d] image width issues

Sent by Blake Everingham on 9 February 2003 05:05


A question about using imagery in liquid layouts:

I'm sure you've been plagued by this problem before - when using a liquid 
layout (one that crops from the right and left, instead of conforming to a 
specific width) it seems near impossible to display an image that stretches 
the width of the <div> the same in each resolution. You get the problem 
that, since the <div id> does not have a set width, you cannot give your 
image that set width.

Usually you must use a simple image, knowing fully well it WILL be too big 
in 640x, too small in 1024x.

Zeldman has the unique idea to incorporate a <div id> using a specific 
width inside your liquid design. Because the image you want to add is set 
as a **background-image** all you have to worry about is the <div id>'s 
width. Sure, the image may crop, but at least the desired effect is gained.

Furthermore, to tailer it to the 100% width of your given <div id>, it 
seems setting "width: auto;" works in IE6/Win, Moz1. Unfortunately this is 
very buggy. The images are not even displayed in Opera 6.

Any ideas or suggestions about the width, or technique to custom tailer an 
image to set equal widths no matter the user's resolution in a liquid 
design? There must be a way.

(A prime example of the problem is my own web site - everomp.com. I would 
love to post images instead of just text, but I hate the fact the images 
appear too small or too big--NOT EQUAL--in the middle column)

Take care.

Blake Everingham - [EMAIL-REMOVED]
http://www.everomp.com

"You could probably beat a guy to death with the Sunday New York Times."
-- George Carlin
Previous Message
Next Message