HTML img scaling

Question

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.

Keep in mind that its not recommended to send huge images and make them small with css. It's better to have different versions of the same image to save bandwidth and to make the page more responsive (even if the image will look small, the full image will be sent). — Esteban Küber, Commented Aug 28, 2009 at 15:25
rwallace, are you using .net or PHP or something other than pure HTML? — Dorjan, Commented Aug 28, 2009 at 15:29
Image file size doesn't matter, there is no requirement in the case I'm looking at to be frugal with bandwidth. I am using PHP, but the HTML solution works. — rwallace, Commented Aug 28, 2009 at 15:35

Volker E. · Accepted Answer · 2015-10-01 22:22:21Z

172

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.

edited Oct 1, 2015 at 22:22

Volker E.

5,97711 gold badges48 silver badges66 bronze badges

answered Aug 28, 2009 at 15:21

RiddlerDev

7,4105 gold badges46 silver badges62 bronze badges

14

Please, please, please note that doing this on massive images will result in long download times for pages that shouldn't have long download times. It's always better to actually resize the image if possible.
– ceejayoz
Commented Aug 28, 2009 at 15:35
Thanks! It turns out your solution of only setting the width not only works for correct scaling, but actually also does the first part just by setting the width to 100%.
– rwallace
Commented Aug 28, 2009 at 15:36
2

@ceejayoz I agree, but that is not what he is asking.
– RiddlerDev
Commented Aug 28, 2009 at 15:54
@ceejayoz I'm wondering, why does it take longer? Doesn't it have to resize when it displays it for both situations? Or are you saying manually resize the actual image and change the file?
– Honinbo Shusaku
Commented May 7, 2015 at 17:34
3

@Abdul I'm saying a 3,000x3,000 pixel 5MB image shouldn't be used in a 100x100 pixel slot in your website.
– ceejayoz
Commented May 7, 2015 at 17:41

| Show 1 more comment

Dimitri Hartt · Accepted Answer · 2019-12-09 17:13:21Z

32

I know that this question has been asked for a long time but as of today one simple answer is:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

The use of vw in here tells that the width is relative to 55% of the width of the viewport.

All the major browsers nowadays support this.

Check this link.

answered Dec 9, 2019 at 17:13

Dimitri Hartt

1,84114 silver badges17 bronze badges

2

vw was a lifesaver for me, the other methods did not work for the image at hand.
– caram
Commented Dec 20, 2019 at 8:45

Add a comment |

TylerH · Accepted Answer · 2021-05-14 21:01:57Z

31

CSS is enough:

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

edited May 14, 2021 at 21:01

TylerH

21.1k72 gold badges78 silver badges105 bronze badges

answered Jul 22, 2016 at 12:49

Selvadurai Handeeban

6497 silver badges8 bronze badges

Add a comment |

unidentified-1 · Accepted Answer · 2013-03-07 18:25:02Z

8

No Javascript required.

IE6 Internet Explorer 6

Percent only works for the width of an element, but height:100%; does not work without the correct code.

CSS

html, body { height:100%; }

Then using a percentage works properly, and dynamically updates on window resize.

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

You do not need a width attribute, the width scales proportionately as the browser window size is changed.

And this little gem, is in case the image is scaled up, it will not look (overly) blocky (it interpolates).

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

Props go to this source: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

answered Mar 7, 2013 at 18:25

unidentified-1

1311 silver badge7 bronze badges

or style="height: 80%; image-rendering: pixelated;" for chrome (or other interpolation methods if needed, see here: developer.mozilla.org/en-US/docs/Web/CSS/image-rendering)
– nivniv
Commented Jan 1, 2021 at 9:03

Add a comment |

Ralph David Abernathy · Accepted Answer · 2016-05-23 06:23:42Z

7

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

edited May 23, 2016 at 6:23

answered Jul 17, 2015 at 15:37

Ralph David Abernathy

5,42913 gold badges53 silver badges84 bronze badges

Add a comment |

riotera · Accepted Answer · 2015-02-21 01:49:53Z

3

I think the best solution is resize the images via script or locally and upload them again. Remember, you're forcing your viewers to download larger files than they need

edited Feb 21, 2015 at 1:49

answered Aug 28, 2009 at 15:23

riotera

1,6139 silver badges14 bronze badges

Add a comment |

GiHe · Accepted Answer · 2020-11-13 23:58:47Z

For an automatic letterbox/pillarbox in a fixed-size rectangle, use the object-fit CSS property. That is usually what I want, and it avoids using code to figure out which is the dominant dimension or — what I used to do — embedding an <SVG> element with an <image> child to wrap the content with its nice preserveAspectRatio options.

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root
      {
        --box-side : min( 42vmin, 480px ) ;
      }
      body
      {
        align-items : center ;
        display : flex ; 
        flex-wrap : wrap ;
        justify-content : center ;
      }
      body,html
      {
        height : 100% ;
        width : 100% ;
      }
      img
      {
        background : grey ;
        border : 1px solid black ;
        height : var( --box-side ) ;
        object-fit : contain ;
        width : var( --box-side ) ;
      }
    </style>
    <title>object-fit</title>
  </head>
  <body>
    <img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" />
    <img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" />
    <img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" />
    <img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
    <img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" />
  </body>
</html>

Dorjan · Accepted Answer · 2009-08-28 15:24:20Z

The best way I know how to do this, is:

1) set overflow to scroll and that way the image would stay in but you can scroll to see it instead

2) upload a smaller image. Now there are plenty of programs out there when uploading (you'll need something like PHP or .net to do this btw) you can have it auto scale.

3) Living with it and setting the width and height, this although will make it look distorted but the right size will still result in the user having to download the full-sized image.

Good luck!

Collectives™ on Stack Overflow

HTML img scaling

8 Answers 8

No Javascript required.

Not the answer you're looking for? Browse other questions tagged
html
image-scaling
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

No Javascript required.

Not the answer you're looking for? Browse other questions tagged htmlimage-scaling or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
image-scaling
or ask your own question.