85

I was wondering if in the width and height <img> attributes, I could specify width and height as percentages?

Well, I guess that is obvious, because when I try so, it resizes, but it appears to skew the quality of my image.

Here is an example of my markup with fixed attributes:

<img src="#" width="346" height="413">

Now, while trying to scale this down, say by half, via percentages:

<img src="#" width="50%" height="50%">

I get something completely different than:

<img src="#" width="173" height="206.5">

I think I'm just fundamentally mistaking my percentage markup or something because there is a noticeable difference between my second and third example visually.

9 Answers 9

92

Note: it is invalid to provide percentages directly as <img> width or height attribute unless you're using HTML 4.01 (see current spec, obsolete spec and this answer for more details). That being said, browsers will often tolerate such behaviour to support backwards-compatibility.

Those percentage widths in your 2nd example are actually applying to the container your <img> is in, and not the image's actual size. Say you have the following markup:

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

Your resulting image will be 500px wide and 300px tall.

jQuery Resize

If you're trying to reduce an image to 50% of its width, you can do it with a snippet of jQuery:

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

Just make sure you take off any height/width = 50% attributes first.

2
  • For the jQuery resize do you have to apply a tag to the image? Sep 16, 2014 at 16:53
  • No, the jQuery resize in my example will resize all the images on the page to 50% width. If you wanted to only do a specific image, you'd need to target it with an id or class; var $img = $( "#imgId" ); $img.width( $img.width() * .5 );
    – Pat
    Oct 3, 2014 at 12:18
33

You can set one or the other (just not both) and that should get the result you want.

<img src="#" height="50%">
2
  • Oh wow! :) Thanks for that, I wonder why that is? Is it because having 40% of an image's height and 70% of the width lets say, just doesn't really occur very much?
    – Qcom
    Aug 3, 2010 at 12:40
  • 14
    Unfortunately it doesn't work that way - your image will be 50% height of its parent container, not 50% of its pixel dimensions. However Fosco is right for skewing - only specifying one will cause your image to remain proportional to its original dimensions.
    – Pat
    Aug 3, 2010 at 12:44
9

Here is the difference:

This sets the image to half of its original size.

<img src="#" width="173" height="206.5">

This sets the image to half of its available presentation area.

<img src="#" width="50%" height="50%">

For example, if you put this as the only element on the page, it would attempt to take up 50% of the width of the page, thus making it potentially larger than its original size - not half of its original size as you are expecting.

If it is being presented at larger than original size, the image will appear greatly pixelated.

9

Try use scale property in css3:

75% of original:

-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);

50% of original:

-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
2

width="50%" and height="50%" sets the width and height attributes to half of the parent element's width and height if I'm not mistaken. Also setting just width or height should set the width or height to the percentage of the parent element, if you're using percents.

4
  • But I'm guessing if you only specify one or the other, then it affects only the element to which the attribute is attributed to.
    – Qcom
    Aug 3, 2010 at 12:41
  • @BOSS: I made a simple test.html and img with width="50%" was exactly the same size as img with width="50%" height="50%".
    – pkauko
    Aug 3, 2010 at 12:43
  • That's odd, it could be because you don't have any formatting on your container, because mine might be screwing up the image.
    – Qcom
    Aug 3, 2010 at 12:52
  • @BOSS: I think that in my test case this was because the image I used happened to have the same aspect ratio as the containing element. Anyway the percentage setting sets the image size to the percentage of the containing element's size in both cases (with only width or height vs with width and height) and not to the percentage of the image size.
    – pkauko
    Aug 3, 2010 at 12:59
1

Given the lack of information regarding the original image size, specifying percentages for the width and height would result in highly erratic results. If you are trying to ensure that an image will fit within a specific location on your page then you'll need to use some server side code to manage that rescaling.

0
1

From W3Schools

The height in percent of the containing element (like "20%").

So I think they mean the element where the div is in?

1

Not sure if this is quite what you're looking for but why not just use inline CSS?

Example:

<img src="" alt="text alternative" style="width: 100%; height: 20%;" />
-6

There is actually a way to do this with html only. Just sets:

<img src="#" width height="50%">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.