How do you stretch an image to fill a div while keeping the image s aspect-ratio

Question

I need to make this image stretch to the maximum size possible without overflowing it s  lt div gt  or skewing the image     I can t predict the aspect-ratio of the image  so there s no way to know whether to use     lt img src  url  style  width  100      or   lt img src  url  style  height  100      I can t use both  i e  style  width  100   height  100     because that will stretch the image to fit the  lt div gt      The  lt div gt  has a size set by percentage of the screen  which is also unpredictable

User · Answer

I had similar issue  I resolved it with just CSS   Basically Object-fit  cover helps you achieve the task of maintaining the aspect ratio while positioning an image inside a div    But the problem was Object-fit  cover was not working in IE and it was taking 100  width and 100  height and aspect ratio was distorted  In other words image zooming effect wasn t there which I was seeing in chrome   The approach I took was to position the image inside the container with  absolute and then place it right at the centre using the combination    position  absolute  top  50   left  50   transform  translate -50   -50      Once it is in the centre  I give to the image       For vertical blocks  i e   where height is greater than width  height  100   width  auto      For Horizontal blocks  i e   where width is greater than height  height  auto  width  100     This makes the image get the effect of Object-fit cover      Here is a demonstration of the above logic   https   jsfiddle net furqan 694 s3xLe1gp   This logic works in all browsers

User · Answer

That s impossible with just HTML and CSS  or at least wildly exotic and complicated  If you re willing to throw some javascript in  here s a solution using jQuery     function           window  resize function             var  i      img image to resize            var  c    img parent            var i ar    i width      i height    c ar    c width      c height                         i width i ar  gt  c ar    c width      c height      i ar                  window  resize          That will resize the image so that it will always fit inside the parent element  regardless of it s size  And as it s binded to the   window  resize   event  when user resizes the window  the image will adjust   This does not try to center the image in the container  that would be possible but I guess that s not what you re after

User · Answer

If you can  use background images and set background-size  cover  This will make the background cover the whole element   CSS  div     background-image  url path to your image png     background-repeat  no-repeat    background-position  50  50     background-size  cover      If you re stuck with using inline images there are a few options  First  there is  object-fit  This property acts on images  videos and other objects similar to background-size  cover    CSS  img     object-fit  cover      Sadly  browser support is not that great with IE up to version 11 not supporting it at all  The next option uses jQuery  CSS   jQuery  HTML   lt div gt     lt img src  image png  class  cover-image  gt   lt  div gt    CSS  div     height  8em    width  15em      Custom jQuery plugin   function           fn coverImage   function contain        this each function           var  this     this           src    this get 0  src           wrapper    this parent           if  contain             wrapper css              background    url     src      50  50  contain no-repeat                      else            wrapper css              background    url     src      50  50  cover no-repeat                              this remove                 return this          jQuery     Use the plugin like this  jQuery   cover-image   coverImage      It will take an image  set it as a background image on the image s wrapper element and remove the img tag from the document  Lastly you could use   Pure CSS  You might use this as a fallback  The image will scale up to cover it s container but it won t scale down   CSS  div     height  8em    width  15em    overflow  hidden     div img     min-height  100     min-width  100     width  auto    height  auto    max-width  none    max-height  none    display  block    position  relative    top  50     left  50     transform  translate -50   -50        Hope this might help somebody  happy coding

User · Answer

Using this method you can fill in your div with the image varying ratio of divs and images   jQuery     window  load function          body   find  fillme  each function          var fillmeval     this  width     this  height          var imgval    this children  img   width    this children  img   height          var imgClass        if imgval  gt  fillmeval             imgClass    stretchy          else            imgClass    stretchx                   this  children  img   addClass imgClass                HTML    lt div class  fillme  gt      lt img src     images myimg jpg    gt   lt  div gt    CSS    fillme    overflow hidden     fillme img stretchx    height auto    width 100      fillme img stretchy    height 100     width auto

User · Answer

Update 2016   Modern browser behave much better  All you should need to do is to set the image width to 100   demo    container img      width  100         Since you don t know the aspect ratio  you ll have to use some scripting  Here is how I would do it with jQuery  demo    CSS   container       width  40       height  40       background   444      margin  0 auto     container img wide       max-width  100       max-height  100       height  auto     container img tall       max-height  100       max-width  100       width  auto       HTML   lt div class  container  gt    lt img src  http   i48 tinypic com wrltuc jpg    gt   lt  div gt   lt br   gt   lt br   gt   lt div class  container  gt    lt img src  http   i47 tinypic com i1bek8 jpg    gt   lt  div gt    Script    window  load function         container   find  img   each function      var imgClass    this width this height  gt  1     wide     tall       this  addClass imgClass

User · Answer

There is a much easier way to do this using only CSS and HTML   HTML    lt div class  fill  gt  lt  div gt    CSS    fill       overflow  hidden      background-size  cover      background-position  center      background-image  url  path to image jpg        This will place your image as the background  and stretch it to fit the div size without distortion

User · Answer

I came across this question searching for a simular problem  I m making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width  The height is set with a vw value   Since I m adding posts with PHP and a database backend  pure CSS was out of the question  I did however find the jQuery javascript solution a bit troblesome  so I came up with a neat  so I think myself at least  solution   HTML  or php    x000D   x000D  div imgfill   x000D    float  left  x000D    position  relative  x000D    background-repeat  no-repeat  x000D    background-position  50   50   x000D    background-size  cover  x000D    width  33 333   x000D    height  18vw  x000D    border  1px solid black    frame of the image   x000D    margin  -1px  x000D    x000D   lt div class  imgfill  style  background-image url source image jpg    gt  x000D    This might be some info x000D   lt  div gt  x000D   lt div class  imgfill  style  background-image url source image2 jpg    gt  x000D    This might be some info x000D   lt  div gt  x000D   lt div class  imgfill  style  background-image url source image3 jpg    gt  x000D    This might be some info x000D   lt  div gt  x000D   x000D   x000D    By using style    it s posible to have PHP update my page dynamically and the CSS-styling together with style    will end up in a perfectly covered image  scaled to cover the dynamic div-tag

User · Answer

Thanks to CSS3  img      object-fit  contain      https   developer mozilla org en-US docs Web CSS object-fit  IE and EDGE as always outsiders  http   caniuse com  feat object-fit

User · Answer

This did the trick for me  div img       width  100       min-height  500px      width  100vw      height  100vh      object-fit  cover

User · Answer

if you working with IMG tag  it s easy    I made this    lt style gt           pic              height  400px              width  400px                     pic img              height  225px                             position  relative              margin  0 auto             lt  style gt    lt div id  pic  gt  lt img src  images menu png  gt  lt  div gt     document  ready function                    pic img   attr    style   height 25   display none  left 100px  top 100px           but i didn t find how to make it work with  pic   background url img menu png   Enyone  Thanks

User · Answer

HTML    lt style gt   foo   bar      width  50px     use any width or height        height  50px      background-position  center center      background-repeat  no-repeat      background-size  cover     lt  style gt    lt div id  foo  style  background-image  url  path to image1 png     gt   lt div id  bar  style  background-image  url  path to image2 png     gt    JSFiddle     And if you want to set or change the image  using  foo as an example    jQuery       foo   css  background-image    url  path to image png        JavaScript   document getElementById  foo   style backgroundImage    url  path to image png

User · Answer

Set width and height of the outer container div  Then use below styling on img    container img      width 100       height auto      max-height 100       This will help you to keep an aspect ratio of your img

User · Answer

try this HTML   lt div class  quot container quot  gt  lt  div gt   CSS   container  background-image  url  quot     quot    background-size  100   background-position  center

User · Answer

Update 2019   You can now use the object-fit css property that accepts the following values  fill   contain   cover   none   scale-down  https   developer mozilla org en-US docs Web CSS object-fit  As an example  you could have a container that holds an image    lt div class  container  gt       lt img src    class  container img    gt   lt  div gt    container       height  50px      width  50     container img       height  100       width  100       object-fit  cover

User · Answer

You can use object-fit  cover  on the parent div   https   css-tricks com almanac properties o object-fit

User · Answer

Many of the solutions found here have some limitation  some not working in IE   object-fit  or older browsers  other solutions do not scale up the images  only shrink it   many solution do not support resize of the window and many are not generic  either expect fix resolution or layout portrait or landscape    If using javascript and jquery is not a problem I have this solution based on the code of  Tatu Ulmanen  I fixed some issues  and added some code in case the image is loaded dinamically and not available at begining  Basically the idea is to have two different css rules and apply them when required  one when the limitation is the height  so we need to show black bars at the sides  and othe css rule when the limitation is the width  so we need to show black bars at the top bottom   function applyResizeCSS        var  i      img imageToResize        var  c    i parent        var i ar   Oriwidth   Oriheight  c ar    c width      c height          if i ar  gt  c ar            i css   width   100              i css   height   auto                   else           i css   height   100              i css   width   auto               var Oriwidth Oriheight    function           window  resize function             applyResizeCSS                     slide   load function            Oriwidth    this width          Oriheight   this height           applyResizeCSS                    window  resize           For an HTML element like    lt img src  images loading gif  name  imageToResize  id  imageToResize   gt

User · Answer

Not a perfect solution  but this CSS might help   The zoom is what makes this code work  and the factor should theoretically be infinite to work ideally for small images - but 2  4  or 8 works fine in most cases    myImage       zoom  2     increase if you have very small images      display  block      margin  auto       height  auto      max-height  100        width  auto      max-width  100

User · Answer

If you want to set a max width or height  so that it will not be very large  while keeping the images aspect-ratio  you can do this   img     object-fit  contain     max-height  70px

User · Answer

To make this image stretch to the maximum size possible without overflowing it s  or skewing the image   Apply     img     object-fit  cover    height  -webkit-fill-available      styles to the image

[image] How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

Here is a demonstration of the above logic.

Examples related to image

Examples related to html

Examples related to size