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

Question

I was wondering if in the width and height  lt img gt  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    lt img src     width  346  height  413  gt    Now  while trying to scale this down  say by half  via percentages    lt img src     width  50   height  50   gt    I get something completely different than    lt img src     width  173  height  206 5  gt    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

User · Answer

From W3Schools  The height in percent of the containing element  like  20      So I think they mean the element where the div is in

User · Answer

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

User · Answer

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

User · Answer

Here is the difference   This sets the image to half of its original size    lt img src     width  173  height  206 5  gt    This sets the image to half of its available presentation area    lt img src     width  50   height  50   gt    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

User · Answer

You can set one or the other  just not both  and that should get the result you want    lt img src     height  50   gt

User · Answer

There is actually a way to do this with html only  Just sets    lt img src     width height  50   gt

User · Answer

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

User · Answer

Note  it is invalid to provide percentages directly as  lt img gt  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  lt img gt  is in  and not the image s actual size   Say you have the following markup    lt div style  width  1000px  height  600px   gt       lt img src     width  50   height  50   gt   lt  div gt    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

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

Examples related to html

Examples related to image

Examples related to image-size