Image Sizing help needed--CSS

[mysterybks]

Here's my current code:

In CSS document:

.authorimg {
background: url('../sitebuildercontent/sitebuilderpictures/JenniferColt.bmp') no-repeat top left;
clear: none;
float: right;
}


In html document:

<div class="authorimg" style="width=124px; height=224px; float: right">

Unfortunately it makes the image space 124x224, but the image is bigger so you only see a small portion. How do I (without having to resize all 160+ images by hand) make the system only show it (in full) at 124x224.

I am trying to make a master page that I can easily change names of images and copy and paste new text to the page without having to recode.

Dawn

[karinne]

You can't using CSS ... the only way is to set the image as an <img> and set the width and height through there.

OR... you could use php and Imagemagick to create thumbnails dynamically (http://sniptools.com/tutorials/dynamic-thumbnailing-with-imagemagick-in-php).

[ahallicks]

You cannot resize an image in CSS. You can set the dimensions, but if you want the image to appear smaller you're just going to have to create an image at the right size.

I think background size is in the CSS3 specification, but is not supported at the moment. If you create a div smaller than your image, only the size of your div will show of the image.