How to resize an image to fit in the browser window

Question

This seems trivial but after all the research and coding I can t get it to work  Conditions are    The browser window size is unknown  So please don t propose a solution involving absolute pixel sizes  The image s original dimensions are unknown  and may or may not already fit the browser window  The image is vertically and horizontally centered  The image proportions must be conserved  The image must be displayed in its entirety in the window  no cropping   I do not wish scrollbars to appear  and they shouldn t if the image fits   The image automatically resizes when the window dimensions change  to occupy all the available space without being larger than its original size    Basically what I want is this    fit     max-width  99     max-height  99      lt img class  fit  src  pic png  gt    The problem with the code above is that it doesn t work  the pic takes all the vertical space it needs by adding a vertical scroll bar    At my disposal is PHP  Javascript  JQuery but I d kill for a CSS-only solution  I don t care if it doesn t work in IE

User · Answer

CSS3 introduces new units that are measured relative to the viewport, which is the window in this case. These are vh and vw, which measure viewport height and width, respectively. Here is a simple CSS only solution:

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

The one caveat to this is that it only works if there are no other elements contributing height on the page.

User · Answer

Building upon  Rohit s answer  this fixes issues flagged by Chrome  reliably resizes the images  and also works for multiple images that are vertically stacked  e g   lt img src  foo jpg  gt  lt br gt  lt img src  bar jpg  gt  lt br gt  lt img src  baz jpg  gt   There is probably a more elegant way of doing this      x000D   x000D   lt style gt  x000D      img   x000D          max-width  99vw  important  x000D          max-height  99vh  important  x000D        x000D   lt  style gt  x000D   lt script gt  x000D      function FitImagesToScreen     x000D          var images   document getElementsByTagName  img    x000D          if images length  gt  0   x000D              document styleSheets 1  rules 0  style  max-height     100 images length -1   vh   x000D              for var i 0  i  lt  images length  i     x000D                  if images i  width  gt    window innerWidth - 10    x000D                      images i  style width    auto   x000D                    x000D                x000D            x000D        x000D   lt  script gt  x000D   lt  HEAD gt  x000D   lt BODY onload  FitImagesToScreen    onresize  FitImagesToScreen    gt  x000D   lt img src  foo png  gt  x000D   lt  BODY gt  x000D   x000D   x000D

User · Answer

Resize Image to Fit the Screen by the Longest Side maintaining its Aspect Ratio img src   quot  fit quot         width  100vw      height  auto      max-width  none      max-height  100vh      object-fit  contain      width  100vw - image width will be 100  of view port  height  auto - image height will be scaled proportionally  max-height  100vw - if image height would become more than view port it will be decreased to fit the screen  consequently image width will be decreased because of the following property  object-fit  contain - the replaced content is scaled to maintain its aspect ratio    while fitting within the element s content box Note  object-fit is fully supported only since IE 16 0

User · Answer

width  100   overflow  hidden    I believe that should do the trick

User · Answer

Use this code in your style tag   lt style gt  html     background  url imagename  no-repeat center center fixed    background-size  cover    height  100     overflow  hidden     lt  style gt

User · Answer

For the future generations  if you want a solution that answers 1-6 and does 7 in a way that allows resize beyond to original size  I have developed a complete solution for this problem   x000D   x000D   lt  DOCTYPE html gt   lt html gt     lt body style  overflow hidden  margin 0  text-align center   gt       lt img src  https   file-examples-com github io uploads 2017 10 file example JPG 2500kB jpg  style  height 100vh  max-width 100   object-fit  contain   gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Make it simple  Thanks   x000D   x000D   bg   x000D    background-image  url  https   images unsplash com photo-1476820865390-c52aeebb9891 ixlib rb-1 2 1 amp ixid eyJhcHBfaWQiOjEyMDd9 amp w 1000 amp q 80    x000D    background-repeat  no-repeat  x000D    background-size  cover  x000D    background-position  center  x000D    height  100vh  x000D    width  100vw  x000D    x000D   lt div class  bg  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Update 2018-04-11  Here s a Javascript-less  CSS-only solution  The image will dynamically be centered and resized to fit the window    lt html gt   lt head gt       lt style gt                          margin  0              padding  0                     imgbox               display  grid              height  100                      center-fit               max-width  100               max-height  100vh              margin  auto                 lt  style gt   lt  head gt   lt body gt   lt div class  imgbox  gt       lt img class  center-fit  src  pic png  gt   lt  div gt   lt  body gt   lt  html gt      The  other  old  solution  using JQuery  sets the height of the image container  body in the example below  so that the max-height property on the image works as expected  The image will also automatically resize when the client window is resized    lt  DOCTYPE html gt   lt html gt   lt head gt       lt style gt                          padding  0              margin  0                     fit      set relative picture size                max-width  100               max-height  100                      center               display  block              margin  auto                 lt  style gt   lt  head gt   lt body gt    lt img class  center fit  src  pic jpg   gt    lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt script type  text javascript  language  JavaScript  gt      function set body height        set body height   window height            body   height   window  height                 document  ready function               window  bind  resize   set body height           set body height             lt  script gt    lt  body gt   lt  html gt    Note  User gutierrezalex packaged a very similar solution as a JQuery plugin on this page

User · Answer

I had a similar requirement  and had to do it it basic CSS and JavaScript  No JQuery available    This is what I got working     lt html gt         lt head gt               lt style gt                     img                             max-width  95   important                            max-height  95   important                                        lt  style gt               lt script gt                     function FitImagesToScreen                           var images   document getElementsByTagName  img                          if images length  gt  0                            for var i 0  i  lt  images length  i                                  if images i  width  gt    window innerWidth - 10                                     images i  style width    auto                                                                                                                                lt  script gt         lt  head gt         lt body onload  FitImagesToScreen    gt        ----            lt  body gt   lt  html gt    Note    I haven t used 100  for image width as there was always a bit of padding to be considered

User · Answer

My general lazy CSS rule    background  width 100   height auto  background  url  yoururl jpg   no-repeat center  background-position  50  50   background-size  100  cover important  overflow hidden      This may zoom in on your image if it is low-res to begin with  that s to do with your image quality and size in dimensions  To center your image  you may also try  in the CSS   display block      margin  auto 0     to center your image  in your HTML    lt div class  background  gt  lt  div gt

User · Answer

Here is a simple CSS only solution  JSFiddle   works everywhere  mobile and IE included   CSS 2 0   html  body       height  100       margin  0      padding  0     img       padding  0      display  block      margin  0 auto      max-height  100       max-width  100       HTML    lt body gt     lt img src  images your-image png    gt   lt  body gt

User · Answer

If you are willing to put a container element around your image  a pure CSS solution is simple  You see  99  height has no meaning when the parent element will extend vertically to contain its children  The parent needs to have a fixed height  say    the height of the viewport   HTML   lt  -- use a tall image to illustrate the problem -- gt   lt div class  fill-screen  gt       lt img class  make-it-fit            src  https   upload wikimedia org wikipedia commons f f2 Leaning Tower of Pisa jpg  gt   lt  div gt    CSS  div fill-screen       position  fixed      left  0      right  0      top  0      bottom  0      text-align  center     img make-it-fit       max-width  99       max-height  99       Play with the fiddle

User · Answer

I know there s already a few answers here  but here is what I used   max-width  100   max-height  100vh  width  auto  margin  auto

User · Answer

html  body width  99   height  99   overflow  hidden  img fit width  100   height  100      Or maybe check this out  http   css-tricks com how-to-resizeable-background-image

[html] How to resize an image to fit in the browser window?

Examples related to html

Examples related to css