Forum Moderators: not2easy

Message Too Old, No Replies

Image Resizing with CSS

Css Image Resize

         

Landy

10:11 pm on Aug 25, 2003 (gmt 0)

10+ Year Member



I currently have a css 3 column layout that works properly. However, I wish to put an image in the middle column and have it resize to the width of the middle column (which is arbitrary).

I have tried

.img-resize
{
position: relative;
width: 100%;
}

and placed the image in that div class in the div id'd "center".

This does nothing, however, and the image just stays it's original size. Any ideas would be appreciated, thanks!

Land

your_store

10:26 pm on Aug 25, 2003 (gmt 0)

10+ Year Member



Are you saying you applied the .img-resize class to a div containing your image or directly to your image? You would need your img tag to look like the following:

<img src="url" class="img-resize">

You might want to look into using a background-image for the middle column instead. You can have it placed on the left so that when the column stretches it reveals more of the image.

Added:
You will probably also want to lose the postion: relative from your css and add display: block

Landy

10:31 pm on Aug 25, 2003 (gmt 0)

10+ Year Member



Thank you, I will try the suggestions and report back!

It worked perfectly, thanks again. I'll go read more tutorials before bothering you guys with such a simple question, but I needed a quick answer, thanks!