Specifying width and height as percentages without skewing photo proportions in HTML

Issue

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.

Solution

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.

Answered By - Pat