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

User · Answer

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    lt img src  image jpg  style  height 80    gt    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

User · Answer

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

User · Answer

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  lt SVG gt  element with an  lt image gt  child to wrap the content with its nice preserveAspectRatio options   x000D   x000D   lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt         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                  lt  style gt       lt title gt object-fit lt  title gt     lt  head gt     lt body gt       lt img src  https   alesmith com wp-content uploads logos ALESMITH-MasterLogoShadow01-MULTI-A png    gt       lt img src  https   ballastpoint com wp-content themes ballastpoint assets img bp-logo-color svg    gt       lt img src  https   d2lchr2s24ssh5 cloudfront net wp-content uploads 2014 01 GF19 PrimaryLogo RGB png    gt       lt img src  https   s3-us-west-1 amazonaws com paradeigm-social NeFAAJ7RlCreLCi9Uk9u pizza-port-logo svg  gt       lt img src  https   s3-us-west-2 amazonaws com lostabbey-prod Logos Logo Port SM Circle White png    gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

css is enough    width   desired width  height  auto   to preserve the aspect ratio of the image

User · Answer

Adding max-width  100   to the img tag works for me

User · Answer

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

User · Answer

I know that this question has been asked for a long time but as of today one simple answer is    lt img src  image png  style  width  55vw  min-width  330px     gt    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

[html] HTML img scaling

No Javascript required.

Examples related to html

Examples related to image-scaling