Scale image to fit a bounding box

Question

Is there a css-only solution to scale an image into a bounding box  keeping aspect-ratio   This works if the image is bigger than the container   img     max-width  100     max-height  100       Example    Use case 1  works   http   jsfiddle net Jp5AQ 2  Use case 2  works   http   jsfiddle net Jp5AQ 3    But I want to scale up the image until a dimension is 100  of the container    Use case 3  doesn t work   http   jsfiddle net Jp5AQ 4

User · Accepted Answer

Note  Even though this is the accepted answer  the answer below is more accurate and is currently supported in all browsers if you have the option of using a background image    No  there is no CSS only way to do this in both directions  You could add   fillwidth       min-width  100       height  auto      To the an element to always have it 100  width and automatically scale the height to the aspect ratio  or the inverse     fillheight       min-height  100        width  auto      to always scale to max height and relative width  To do both  you will need to determine if the aspect ratio is higher or lower than it s container  and CSS can t do this   The reason is that CSS does not know what the page looks like  It sets rules beforehand  but only after that it is that the elements get rendered and you know exactly what sizes and ratios you re dealing with  The only way to detect that is with JavaScript     Although you re not looking for a JS solution I ll add one anyway if someone might need it  The easiest way to handle this with JavaScript is to add a class based on the difference in ratio  If the width-to-height ratio of the box is greater than that of the image  add the class  fillwidth   else add the class  fillheight      x000D   x000D     div   each function     x000D    var fillClass      this  height    gt    this  width     x000D         fillheight  x000D         fillwidth   x000D      this  find  img   addClass fillClass   x000D      x000D   fillwidth    x000D    width  100    x000D    height  auto   x000D    x000D   fillheight    x000D    height  100    x000D    width  auto   x000D    x000D   x000D  div   x000D    border  1px solid black  x000D    overflow  hidden  x000D    x000D   x000D   tower   x000D    width  100px  x000D    height  200px  x000D    x000D   x000D   trailer   x000D    width  200px  x000D    height  100px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  tower  gt  x000D     lt img src  http   placekitten com 150 150    gt  x000D   lt  div gt  x000D   lt div class  trailer  gt  x000D     lt img src  http   placekitten com 150 150    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another solution without background image and without the need for a container  though the max sizes of the bounding box must be known    img    max-height  100px    max-width  100px    width  auto        These two are added only for clarity       height  auto       as the default is auto anyway         If a container s use is required  then the max-width and max-height can be set to 100    img       max-height  100       max-width  100       width  auto     These two are added only for clarity         height  auto     as the default is auto anyway       div container       width  100px      height  100px      For this you would have something like    lt table gt       lt tr gt           lt td gt Lorem lt  td gt           lt td gt Ipsum lt br   gt dolor lt  td gt           lt td gt               lt div class  container  gt  lt img src  image5 png    gt  lt  div gt           lt  td gt       lt  tr gt   lt  table gt

User · Answer

I have used table to center image inside the box  It keeps aspect ratio and scales image in a way that is totally inside the box  If the image is smaller than the box then it is shown as it is in the center  Below code uses 40px width and 40px height box   Not quite sure how well it works because I removed it from another more complex code and simplified it little bit   x000D   x000D   SmallThumbnailContainer     display  inline-block    position  relative    float  left    width  40px    height  40px    border  1px solid  ccc    margin  0px    padding  0px      SmallThumbnailContainer     width  40px    margin  0px 10px 0px 0px      SmallThumbnailContainer tr     height  40px    text-align  center      SmallThumbnailContainer tr td     vertical-align  middle    position  relative    width  40px      SmallThumbnailContainer tr td img     overflow  hidden    max-height  40px    max-width  40px    vertical-align  middle    margin  -1px -1px 1px -1px    x000D   lt table class  SmallThumbnailContainer  cellpadding  0  cellspacing  0  gt     lt tr gt       lt td gt         lt img src  https   www gravatar com avatar bf7d39f4ed9c289feca7de38a0093250 s 32 amp d identicon amp r PG  width  32  height  32  alt  OP s SO avatar image used as a sample jpg because it is hosted on SO  thus always available    gt       lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D   Note  the native thumbnail size in this snippet is 32px x 32px  which is smaller than its 40px x 40px container  If the container is instead sized smaller than the thumbnail in any dimension  say 40px x 20px  the image flows outside the container in the dimensions that are smaller than the corresponding image dimension   The container is marked by a gray 1px border

User · Answer

This example to stretch the image proportionally to fit the entire window  An improvisation to the above correct code is to add    window   resize function        function stretchImg           div   each function              this  height    gt    this  find  img   height                 this  find  img   removeClass  fillwidth   addClass  fillheight                          this  width    gt    this  find  img   width                 this  find  img   removeClass  fillheight   addClass  fillwidth                           stretchImg        window   resize function         strechImg          There are two if conditions  The first one keeps checking if the image height is less than the div and applies  fillheight class while the next checks for width and applies  fillwidth class  In both cases the other class is removed using  removeClass    Here is the CSS   fillwidth       width  100      max-width  none     height  auto      fillheight       height  100vh     max-width  none     width  auto       You can replace 100vh by 100  if you want to stretch the image with in a div  This example to stretch the image proportionally to fit the entire window

User · Answer

html        lt div class  container  gt         lt img class  flowerImg  src  flower jpg  gt       lt  div gt    css     container    width  100px    height  100px       flowerImg    width  100px    height  100px    object-fit  cover      object-fit  contain    object-fit  scale-down    object-position  -10  0    object-fit  none    object-fit  fill

User · Answer

You can accomplish this with pure CSS and complete browser support  both for vertically-long and horizontally-long images at the same time   Here s a snippet which works in Chrome  Firefox  and Safari  both using object-fit  scale-down  and without using it     x000D   x000D  figure   x000D    margin  0  x000D    x000D   x000D   container   x000D    display  table-cell  x000D    vertical-align  middle  x000D    width  80px  x000D    height  80px  x000D    border  1px solid  aaa  x000D    x000D   x000D   container image   x000D    display  block  x000D    max-width  100   x000D    max-height  100   x000D    margin-left  auto  x000D    margin-right  auto  x000D    x000D   x000D   container2 image2   x000D    width  80px  x000D    height  80px  x000D    object-fit  scale-down  x000D    border  1px solid  aaa  x000D    x000D  Without  object-fit  scale-down   x000D   x000D   lt br gt  x000D   lt br gt  x000D   x000D   lt figure class  container  gt  x000D     lt img class  container image  src  https   i imgur com EQgexUd jpg  gt  x000D   lt  figure gt  x000D   x000D   lt br gt  x000D   x000D   lt figure class  container  gt  x000D     lt img class  container image  src  https   i imgur com ptO8pGi jpg  gt  x000D   lt  figure gt  x000D   x000D   lt br gt  Using  object-fit  scale-down   x000D   x000D   lt br gt  x000D   lt br gt  x000D   x000D   lt figure gt  x000D     lt img class  container2 image2  src  https   i imgur com EQgexUd jpg  gt  x000D   lt  figure gt  x000D   x000D   lt br gt  x000D   x000D   lt figure gt  x000D     lt img class  container2 image2  src  https   i imgur com ptO8pGi jpg  gt  x000D   lt  figure gt  x000D   x000D   x000D

User · Answer

The cleanest and simplest way to do this   First some CSS   div image-wrapper       height  230px     Suggestive number  pick your own height as desired        position  relative      overflow  hidden     This will do the magic        width  300px     Pick an appropriate width as desired  unless you already use a grid  in that case use 100       img       width  100       position  absolute      left  0      top  0      height  auto      The HTML     lt div class  image-wrapper  gt     lt img src  yourSource jpg  gt   lt  div gt    This should do the trick

User · Answer

Thanks to CSS3 there is a solution    The solution is to put the image as background-image and then set the background-size to contain   HTML   lt div class  bounding-box  gt   lt  div gt    CSS   bounding-box     background-image  url         background-repeat  no-repeat    background-size  contain      Test it here  http   www w3schools com cssref playit asp filename playcss background-size amp preval contain  Full compatibility with latest browsers  http   caniuse com background-img-opts  To align the div in the center  you can use this variation    bounding-box     background-image  url         background-size  contain    position  absolute    background-position  center    background-repeat  no-repeat    height  100     width  100

User · Answer

This helped me    img-class     width   lt img width gt     height   lt img height gt     content  url   path to img png        Then on the element  you can use javascript or media queries to add responsiveness     lt div class  img-class  style  transform  scale X    gt  lt  div gt    Hope this helps

User · Answer

Here s a hackish solution I discovered   image       max-width  10       max-height  10       transform  scale 10      This will enlarge the image tenfold  but restrict it to 10  of its final size - thus bounding it to the container  Unlike the background-image solution  this will also work with  lt video gt  elements  Interactive example   x000D   x000D   function step timestamp         var container   document getElementById  container         timestamp    1000       container style left      200   100   Math sin timestamp   1 0      px        container style top       200   100   Math sin timestamp   1 1      px        container style width     500   500   Math sin timestamp   1 2      px        container style height    500   500   Math sin timestamp   1 3      px        window requestAnimationFrame step        window requestAnimationFrame step   x000D    container        outline  1px solid black       position  relative       background-color  red       image        display  block       max-width  10        max-height  10        transform-origin  0 0       transform  scale 10      x000D   lt div id  container  gt       lt img id  image  src  https   upload wikimedia org wikipedia en 7 7d Lenna  28test image 29 png  gt   lt  div gt  x000D   x000D   x000D

User · Answer

Today  just say object-fit  contain   Support is everything but IE  http   caniuse com  feat object-fit

User · Answer

boundingbox       width  400px      height  500px      border  2px solid  F63    img      width 400px      max-height  500px      height auto      I m editing my answer to further explain my soluton as I ve got a down vote   With the styles set as shown above in css  now the following html div will show the image always fit width wise and will adjust hight aspect ratio to width  Thus image will scale to fit a bounding box as asked in the question    lt div class  boundingbox  gt  lt img src  image jpg   gt  lt  div gt

User · Answer

Are you looking to scale upwards but not downwards   div       border  solid 1px green      width  60px      height  70px     div img       width  100       height  100       min-height  500px      min-width  500px      outline  solid 1px red      This however  does not lock aspect-ratio

[html] Scale image to fit a bounding box

Examples related to html

Examples related to css

Examples related to image

Examples related to resize

Examples related to autoresize