How can I fill a div with an image while keeping it proportional

Question

I found this thread     How do you stretch an image to fill a  lt div gt  while keeping the image  39 s aspect-ratio      that is not entirely the thing that I want   I have a div with a certain size and an image inside of it  I want to always fill-out the div with the image regardless if the image is landscape or portrait  And it doesn t matter if the image is cut-off  the div itself has overflow hidden    So if the image is portrait I want the width to be 100  and the height auto so it stays in proportion  If the image is landscape I want the height to be 100  and the width to beauto   Sounds complicated right    lt div class  container  gt      lt img src  some-image jpg  alt  Could be portrait or landscape   gt   lt  div gt    Since I don t know how to do it I simply created a quick image of what I mean  I can t even properly describe it     So  I guess I m not the first one asking this  However I couldn t really find a solution to this  Maybe there is some new CSS3 way of doing this - I m thinking of flex-box  Any idea  Maybe it s even easier than I expect it to be

User · Answer

Consider using background-size  cover  IE9   in conjunction with background-image  For IE8-  there is a polyfill

User · Answer

It s a bit late but I just had the same problem and finally solved it with the help of another stackoverflow post  https   stackoverflow com a 29103071   img      object-fit  cover     width  50px     height  100px     Hope this still helps somebody  Ps  Also works together with max-height  max-width  min-width and min-height css properties  It s espacially handy with using lenght units like 100  or 100vh 100vw to fill the container or the whole browser window

User · Answer

If I correctly understand what you want  you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you   x000D   x000D   fill       display  flex      justify-content  center      align-items  center      overflow  hidden    fill img       flex-shrink  0      min-width  100       min-height  100    x000D   lt div class  fill  gt       lt img src  https   picsum photos id 237 320 240  alt      gt   lt  div gt  x000D   x000D   x000D   JSFiddle here I tested this successfully in IE9  Chrome 31  and Opera 18  But no other browsers were tested  As always you must consider your particular support requirements

User · Answer

An old question but deserves an update as now there is a way   The correct CSS based answer is to use object-fit  cover  which works like background-size  cover  Positioning would be taken care of by object-position attribute  which defaults to centering   But there is no support for it in any IE   Edge browsers  or Android  lt  4 4 4  Also  object-position is not supported by Safari  iOS or OSX  Polyfills do exist  object-fit-images seems to give best support   For more details on how the property works  see CSS Tricks article on object-fit for explanation and demo

User · Answer

x000D   x000D   image-wrapper  x000D      width  100px  x000D      height  100px  x000D      border  1px solid  ddd  x000D    x000D   image-wrapper img   x000D      object-fit  contain  x000D      min-width  100   x000D      min-height  100   x000D      width  auto  x000D      height  auto  x000D      max-width  100   x000D      max-height  100   x000D    x000D   lt div class  image-wrapper  gt  x000D     lt img src    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

All answers below have fixed width and height  which makes solution  not responsive    To achieve the result but keep image responsive I used following    Inside container place a transparent gif image with desired proportion   Give an image tag inline css background with image you want to resize and crop   HTML    lt div class  container  gt       lt img style  background-image  url  https   i imgur com XOmNCwY jpg     src  img blank gif  gt   lt  div gt      container img     width  100      height  auto     background-size  cover     background-repeat  no-repeat     background-position  center

User · Answer

Here you have my working example  I have used a trick that is setting the image as background of the div container with background-size cover and background-position center center  I have placed the image with width 100  and opacity 0 making it invisible  Note that I am showing my image only because I have an special interest on calling the child click event   Please note that altought I am ussing angular it is completely irrelevant     lt div class  foto-item  ng-style    background-image   url   foto path       gt       lt img class  materialboxed  ng-class  foto picid  ng-src    foto path    style  opacity  0 filter  alpha opacity 0    width  100   onclick      materialboxed    gt    lt  div gt   lt style gt   foto-item   height  75   important  width  100   position  absolute  top  0  left  0  overflow hidden  background-size  cover  background-position  center center     lt  style gt    The result is the one that you define as optimal in all cases

User · Answer

This should do it   img       min-width  100   min-height  100   width  auto  height  auto

User · Answer

The only way I achieved the  best case  scenario described  was putting the image as a background    lt div class  container  gt  lt  div gt      container       width  150px      height  100px      background-image  url  http   i stack imgur com 2OrtT jpg        background-size  cover      background-repeat  no-repeat      background-position  50  50

User · Answer

Try this   img     position  relative    left  50     min-width  100     min-height  100     transform  translateX -50        Hope this helps

User · Answer

You can achieve this using css flex properties  Please see the code below   x000D   x000D   img-container   x000D    border  2px solid red  x000D    justify-content  center  x000D    display  flex  x000D    flex-direction  row  x000D    overflow  hidden  x000D     x000D    x000D   img-container  img-to-fit   x000D    flex  1  x000D    height  100   x000D    x000D   lt div class  img-container  gt  x000D     lt img class  img-to-fit  src  https   images pexels com photos 8633 nature-tree-green-pine jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is an answer with support to IE using object-fit so you won t lose ratio Using a simple JS snippet to detect if the  object-fit is supported and then replace the img for a svg  x000D   x000D    ES6 version if   objectFit  in document documentElement style     false      document addEventListener  DOMContentLoaded        gt        document querySelectorAll  img data-object-fit    forEach image   gt           image runtimeStyle    image style  background    url    image src    no-repeat 50    image currentStyle   image currentStyle  object-fit     image getAttribute  data-object-fit           image src    data image svg xml  3Csvg xmlns  http   www w3 org 2000 svg  width    image width   height    image height   3E 3C svg 3E                   ES5 version if   objectFit  in document documentElement style     false      document addEventListener  DOMContentLoaded   function         Array prototype forEach call document querySelectorAll  img data-object-fit    forEach function image           image runtimeStyle    image style  background    url     concat image src       no-repeat 50     concat image currentStyle   image currentStyle  object-fit     image getAttribute  data-object-fit           image src    data image svg xml  3Csvg xmlns  http   www w3 org 2000 svg  width    concat image width     height     concat image height     3E 3C svg 3E                     x000D  img     display  inline-flex    width  175px    height  175px    margin-right  10px    border  1px solid red       for browsers which support object fit      data-object-fit  cover       object-fit  cover     data-object-fit  contain       object-fit  contain   x000D   lt img data-object-fit  cover  src    picsum photos 1200 600    gt   lt img data-object-fit  contain  src    picsum photos 1200 600    gt   lt img src    picsum photos 1200 600    gt  x000D   x000D   x000D    Note  There are also a few object-fit polyfills out there that will make object-fit work  Here are a few examples   object-fit-images constancecchen  object-fit-pollyfill Polyfill for CSS object-fit property

User · Answer

You can use div to achieve this  without img tag    hope this helps    x000D   x000D   img  x000D   width 100px  x000D   height 100px  x000D   background-image url  http   www mandalas com mandala htdocs images Lrg image Pages Flowers Large Orange Lotus 8 jpg    x000D   background-repeat no-repeat  x000D   background-position center center  x000D   border 1px solid red  x000D   background-size cover  x000D    x000D   img1  x000D   width 100px  x000D   height 100px  x000D   background-image url  https   images freeimages com images large-previews 9a4 large-pumpkin-1387927 jpg    x000D   background-repeat no-repeat  x000D   background-position center center  x000D   border 1px solid red  x000D   background-size cover  x000D    x000D   lt div class  img  gt   x000D   lt  div gt  x000D   lt div class  img1  gt   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The CSS object-fit  cover and object-position  left center property values now address this issue

User · Answer

Just fix the height of the image  amp  provide width   auto  img      height  95vh      width  auto

[css] How can I fill a div with an image while keeping it proportional?

Examples related to css

Examples related to image

Examples related to positioning