HTML img scaling

Question

I am trying to display some large images with HTML img tags. At the moment, they are leaving the edge of the screen; How can I scale them to stay in the browser window?

Or in the probable case, when this is not possible, is it even possible to 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 any attributes that the container may have that will not be associated with the image. I cannot specify pixels because I have to deal with a large collection of images with different pixel sizes. Maximum width does not work.

Answer 1

Set only width or height , and it automatically scales the other. And yes, you can use a percentage.

The first part can be completed, but requires JavaScript, so it may not work for all users.

Answer 2

Having looked at the W3 Schools link for the img tag , you should do something like:

 <img src="img.jpg" width="50%" height="50%"/> 

For automatic scaling through Javascript check this tip

Answer 3

css is enough:

 width : desired_width; height: auto;/*to preserve the aspect ratio of the image*/ 

Answer 4

No Javascript required.

IE6 Internet Explorer 6

Percentage works only for the width of the element, but height:100%; not working without the correct code.

CSS

 html, body { height:100%; } 

Then, percent usage works correctly and is dynamically updated when the window is resized.

 <img src="image.jpg" style="height:80%;"> 

You do not need the width attribute, the width is scaled in proportion to the size of the browser window.

And this little pearl, if the image is enlarged, it will not look (too) blocky (it is interpolated).

 img { -ms-interpolation-mode: bicubic; } 

Details go to this source: Ultimate IE6 Cheatsheet: How to Fix 25+ Internet Explorer 6 Errors

Answer 5

Adding max-width: 100%; The img tag works for me.

Answer 6

I think the best solution would be to resize the images through a script or locally and load them again. Remember that you force your viewers to upload larger files than they need.

Answer 7

The best way I know how to do this:

1) set the overflow to scroll and so the image remains, but you can scroll to see it instead

2) upload a smaller image. Now, when loading, there are many programs (for this you need something like PHP or .net), you can get automatic scaling.

3) Living with this and setting the width and height, this, although it will make it distorted, but the correct size will still lead to the user loading a full-sized image.

Good luck