Using CSS to scale images

[frankvw]

Hi, everyone,

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:

<img src="mugshot.gif" width="100" height="200" border="0" alt="Foobar" />

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.

I have tried the intuitive approach - the first thing that the unenlightened might think of, which is of course:

img {
  width: 50%;
  height: 50%;
}

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).

Suggestions, anyone?

// FvW

[EMaks]

I don't know whether this is what you want, but I've solved it like this: put your image in div with exact width and height of your image and then you can scale img with css by setting % I know, it's obvious solution, but it works!

[aj_nsc]

But of course then you'd have to know the exact width and height of every image and if you knew that then you wouldn't have to use the extra div.....

What the OP is talking about is not directly possible with CSS alone, but easily accomplished with Javascript - e.g. find all images with a certain selector, scale those images using Javascript.

[Dekker500]

Yes, you definitely can use CSS.

The trick is to only specify ONE dimension, and then it will scale proportionally. As for getting it to a percentage... EMaks is correct, you need a value to scale from, and CSS defaults to using the container. Therefore set (at least) one dimension, and then use the CSS trick to scale that ONE dimension, and the other should scale up.... Of course, if your container has a limit on the other dimension such as height or max-height, you may run into Overflow issues...

Dekker (Why Not Fix It?)

[frankvw]

Thanks for the responses, everyone!

So. The long and the short of it is that there is neither an easy nor a good way to do this using CSS alone. Okay - so as ideas go this one was a dead end. If it can be made to work at all, it will require horrid levels of kludgy-ness. Oh well... At least I won't waste any more time on tinkering with it, then.

Thanks for sorting me out, guys!

// FvW

[sohguanh]

In software development not only pertaining to Web applications, we need to use a multitude of technologies to deliver the goods. It is quite impossible to find one language/technology to fulfill all requirements.

It seems for your case it will be worth your while to learn JavaScript on top of CSS and HTML.

Later on, you will need a server side Web language too.