Responsive Image full screen and centered - maintain aspect ratio not exceed window

Question

So I want an img to be displayed    as big as possible  filling the width when it is landscape   height when it is portrait  no crop no skew or stretch  original aspect ratio  centred both vertically and horizontally   Also  the image s original size is not known   I ve tried quite a few different options for this  including a flexbox one  to get the vertical center   but nothing seems to tick all the boxes   Ideally I d like this to be an all CSS solution of course  but I have been looking into some JS as well   Thanks

User · Accepted Answer

To center it  you can use the technique shown here  Absolute centering  To make it as big as possible  give it max-width and max-height of 100   To maintain the aspect ratio  even when the width is specifically set like in the snippet below   use object-fit as explained here   x000D   x000D   className       max-width  100       max-height  100       bottom  0      left  0      margin  auto      overflow  auto      position  fixed      right  0      top  0      -o-object-fit  contain      object-fit  contain    x000D   lt img src  https   i imgur com HmezgW6 png  class  className    gt    lt  -- Slider to control the image width  only to make demo clearer  -- gt   lt input type  range  min  10  max  2000  value  276  step  10  oninput  document querySelector  img   style width    this value   px    style  width  90   position  absolute  z-index  2    gt  x000D   x000D   x000D

User · Answer

I have come to point out the answer nobody seems to see here  You can fullfill all requests you have made with pure CSS and it s very simple  Just use Media Queries  Media queries can check the orientation of the user s screen  or viewport  Then you can style your images depending on the orientation   Just set your default CSS on your images like so   img      width auto     height auto     max-width 100      max-height 100       Then use some media queries to check your orientation and that s it    media  orientation  landscape    img   height 100        media  orientation  portrait    img   width 100         You will always get an image that scales to fit the screen  never loses aspect ratio  never scales larger than the screen  never clips or overflows   To learn more about these media queries  you can read MDN s specs   Centering  To center your image horizontally and vertically  just use the flex box model  Use a parent div set to 100  width and height  like so   div parent      display flex     position fixed     left 0px     top 0px     width 100      height 100      justify-content center     align-items center      With the parent div s display set to flex  the element is now ready to use the flex box model  The justify-content property sets the horizontal alignment of the flex items  The align-items property sets the vertical alignment of the flex items   Conclusion  I too had wanted these exact requirements and had scoured the web for a pure CSS solution  Since none of the answers here fulfilled all of your requirements  either with workarounds or settling upon sacrificing a requirement or two  this solution really is the most straightforward for your goals  as it fulfills all of your requirements with pure CSS   EDIT  The accepted answer will only appear to work if your images are large  Try using small images and you will see that they can never be larger than their original size

User · Answer

yourimg   position  fixed  left  0  top  0  width  100   height  100       and make sure there is no parent tags with position  relative in it

User · Answer

After a lot of trial and error I found this solved my problems  This is used to display photos on TVs via a browser    It Keeps the photos aspect ratio Scales in vertical and horizontal Centers vertically and horizontal  The only thing to watch for are really wide images  They do stretch to fill  but not by much  standard camera photos are not altered   Give it a try       only tested in chrome so far  HTML    lt div class  frame  gt     lt img src  image jpg   gt   lt  div gt    CSS    frame     border  1px solid red     min-height  98     max-height  98     min-width  99     max-width  99      text-align  center    margin  auto    position  absolute    img     border  1px solid blue     min-height  98     max-width  99     max-height  98      width  auto    height  auto    position  absolute    top  0    bottom  0    left  0    right  0    margin  auto

User · Answer

You could use a div with a background image instead and this CSS3 property   background-size  contain  You can check out an example on   https   developer mozilla org en-US docs Web Guide CSS Scaling background images contain  To quote Mozilla      The contain value specifies that regardless of the size of the containing box  the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container    However  keep in mind that your image will be upscaled if the div is larger than your original image

[css] Responsive Image full screen and centered - maintain aspect ratio, not exceed window

Examples related to css

Examples related to responsive-design