如何使用百分比作为参数在HTML中调整图像大小？

Question

I would like to resize an image on my website. I know how to do it by either resizing the image before or calculating the width and height and setting the values in pixels. But I use the same picture multiple times with different dimmensions, so it would take me less time if I could resize the image relatively to its own size.

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>

I have tried this, however the problem is that the size is set relative to its parent element.

Answer 1

There's no way to do what you want automatically using HTML or CSS alone. You'll need to use JavaScript to get the image's dimensions, then calculate a percentage of those dimensions and reapply them to the image in pixels

Answer 2

There is a method, but it isn't perfect. It requires a wrapping element whose display is set to 'inline-block' and the image is resized using 'max-width'.

The issue is that the parent element retains the image's original width, which could cause problems depending on your requirements.

Example: http://jsfiddle.net/amustill/GnEw5/