How to scale element height and width using CSS?

Question

Is there a way to use CSS to scale elements. For example, if I have an image, how can I say

img.height = image.height * 0.75  // scale down to 0.75

using CSS?

Answer 1

Try the following:

div.zoomed { zoom: 0.75; -moz-transform: scale(0.75); }

Should work in: Firefox 3.5, IE 5.5+, Opera, Safari 4, Chrome

Edit: You should also add -webkit-transform: scale(0.75);for Chrome and Safari, although recent versions supportzoom

Answer 2

As with CSS 2.1, you cannot resize one element depending on other elements (including yourself).

You will need to use JavaScript for this.

This is probably possible in CSS3 with CSS variables.