resizing an image using percentage (%)

When resizing an image using percentage (%), It is percentage of what? is it percentage of the original image size or that of the webpage?

html images resizing

3rd Feb 2017, 1:23 PM

dougTdoug

1 Answer

+ 2

It is % of container size... if the container is the <body> element, or the container have the wider width availabale on viewport ( as a <div> inside the <body> by default ), that's correspond to the width of the webpage... for a width size: for a height, this is calculate relatively to the container height ( so, by default, <body> height doesn't fit 100% height of window ). Other relatives units are available, to easier handle percentage of viewport: 'vw' and 'vh', respectively 1% of Viewport Width and Height... To handle % of image itself, safe method is using JS and getting/setting original ( or tageting expected ) image size in px with calculation of % wanted, because that isn't really doable with Css: you can eventually look at 'max-width' property in some contexts, but nothing rather absolute sizing in pixel unit.

4th Feb 2017, 1:42 PM

visph