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

Question

I was wondering if in the width and height 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.

UPDATE: Hey thanks everyone for all of the helpful posts!

I really actually like the jQuery suggestion made by Pat just because with one snippet as he suggested, I can actually modify the selector and make it the apply to all of my fancybox affected images like-so:

$('img.FancyBox').each(function(){
  $(this).width($(this).width() * 0.25);
});

How awesome is that!

You can check out the live effect here at my site: http://www.marioplanet.com/product.htm

It works pretty well, considering the fact that once I connect it to my SQL Server db then I can just apply that one jQuery snippet to all of the FancyBox class images on my product pages.

Thanks guys!

Answer 1

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

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

Answer 2

From W3Schools (http://www.w3schools.com/tags/att_img_height.asp):

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

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

Answer 3

Hi,

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.

Answer 4

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(){
    $(this).width($(this).width() * 0.5);
});

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

Answer 5

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.

Answer 6

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.