HTML img scaling

html image-scaling
rwallace picture rwallace · Aug 28, 2009 · Viewed 411.1k times · Source

I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?

Or in the likely event that this is not possible, is it possible to at least say "display this image at 50% of its normal width and height"?

The width and height attributes distort the image -- as far as I can tell, this is because they refer to whatever attributes the container may end up with, which will be unrelated to the image. I can't specify pixels because I have to deal with a large collection of images each with a different pixel size. Max-width doesn't work.

Answer

RiddlerDev picture RiddlerDev · Aug 28, 2009

Only set the width or height, and it will scale the other automatically. And yes you can use a percentage.

The first part can be done, but requires JavaScript, so might not work for all users.

Related questions

Scaling image with CSS Transition

This is how I want to scale my images, smoothly without any jumps. My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code: How to fix this? The red square …

Read More
How to create an HTML button that acts like a link?

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible. I would also like it so …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More