Using CSS to scale images
I'm wondering if it is possible at all to use CSS to increase or reduce the size (width/height) of an image to, say, 50% of its original. (Yes, I know that client-side resizing is not the way to do it and leads to bloated page load times and grotty-looking results, but that's not the point right now.)
For example, if I have the following HTML code:
is there any CSS trickery possible to cause this image to be displayed at, say, 50% of its original size (i.e. 50x100) regardless of its size? I could fix the size in CSS, thereby overriding the original 100x200 size declaration (with such a conflict between HTML and CSS sometimes leading to unpredictable results, which is why I avoid that sort of thing) but that's not what I want; what I am looking for is to reduce all image sizes by a certain factor.
<img src="mugshot.gif" width="100" height="200" border="0" alt="Foobar" />
I have tried the intuitive approach - the first thing that the unenlightened might think of, which is of course:
but of course that resizes the image to 50% of the PARENT size (e.g. the table, div or body in which the image lives).