Can't Get CSS Resize Images to Work

[billatl]

Hello,

I am in the process of converting a page based on a table layout. One of the items I'm having a problem with is CSS for resizing an image doesn't work. I need to resize several images - so using the background element won't work for me.

So, I have several images on the page that are referenced like this: <img

src="../images/image1" width="143" height="82" />

In trying to rework this with CSS, I've come up with this:

reviewimage {  //also tried reviewimage img {
padding: 5px 15px 0 0px;
width: 143;
height: 82;
float:left;
vertical-align:text-top;
}

Then use one of the following to display the image:

<div class="reviewimage"><img src="../images/image1" /></div>
<img class="reviewimage" src="../images/image1" />

Neither of these work. The padding, alignment, etc. work - but not the resizing - Why???

[Excavator]

Hello billatl,
Your inline style is correct in using numbers only. I think browsers assume px measurements here. It's incompletely cut/pasted here so I don't know that it's not working because your format is wrong... Should be something like this -

<img src="../images/image1.jpg" alt="description" width="143" height="82" class="reviewimage" />

Your CSS does need a measurement specified. Add the bits highlighted in red -

.reviewimage /*also tried reviewimage img*/ {
padding: 5px 15px 0 0px;
width: 143px;
height: 82px;
float:left;
vertical-align:text-top;
}

So, both your inline and your CSS image sizes are the same. What are you trying to resize from and why can't you actually resize the image so as not to make the end user download a large image they will never see?

[oesxyl]

Originally Posted by billatl

Hello,

I am in the process of converting a page based on a table layout. One of the items I'm having a problem with is CSS for resizing an image doesn't work. I need to resize several images - so using the background element won't work for me.

So, I have several images on the page that are referenced like this: <img

src="../images/image1" width="143" height="82" />

In trying to rework this with CSS, I've come up with this:

reviewimage {  //also tried reviewimage img {
padding: 5px 15px 0 0px;
width: 143;
height: 82;
float:left;
vertical-align:text-top;
}

Then use one of the following to display the image:

<div class="reviewimage"><img src="../images/image1" /></div>
<img class="reviewimage" src="../images/image1" />

Neither of these work. The padding, alignment, etc. work - but not the resizing - Why???

because you set the height and width for the container, the div element, not for img element.

best regards

[billatl]

Originally Posted by Excavator

Hello billatl,
Your CSS does need a measurement specified. Add the bits highlighted in red...
...as not to make the end user download a large image they will never see?

Geez, it's always the little things. I set the pixels and it worked fine. As to why - well, the larger image is viewable elsewhere on the site. Better resize an existing image that may be in cache than have two separate images and get dinged twice.

Thanks for your help.