I'm having a bit of a css dilemma.

css resizing images issue

[j_pinzone]

Hello everyone, I know something of this nature has been posted and discussed here in the past, but I have a bit of a different situation concerning this topic. My situation: I have a photobucket album where I have some of my graphic arts uploaded. I use this album as a host to my images in my gallery on a different site and it's backbone is css. I'm having a bit of trouble resizing my images to fit specific "slots" on my gallery page using css coding to slightly down-size them when they display in my gallery, the other problem I face is resizing individual images and not all of them at once to set widths and heights. Each of my images in photobucket are different pixel width & height sizes and I don't want all of them to be resized to say 250px by 300px for example when they display in my gallery. Right now the image I'm tinkering with is displayed in my gallery the same size as it is in photobucket. (I have no idea how to post my code I developed in Dreamweaver 8 for my gallery so you can see my code structure, unfortunately.) All I'm looking for is a way to downsize the displayed image on my gallery, the upload size is ok to remain the same, I don't have any large files, most are well under 1Mb in size. Can anyone give a css noobie any help with this? Thanks.

[alfaguru]

You can set a height value in the CSS for your images, then they'll be resized to that height with the widths in proportion:

div.images img {
height: 100px;
}

This assumes you have all your images inside a wrapper div, like this:

<div class="images">
... images go here
</div>

[alfaguru]

Further to what I said above, for this to work you must remove any height and width attributes on the img elements you are styling.