CSS Image size how to fill but not stretch

Question

I have an image  and I want to set it a specific width and height  in pixels   But If I set width and height using css  width 150px  height 100px   image will be stretched  and It may be ugly   How to Fill images to a specific size using CSS  and not stretching it   Example of fill and stretching image   Original Image     Stretched Image     Filled Image     Please note that in the Filled image example above  first  image is resized to 150x255  maintained aspect ratio   and then  it cropped to 150x100

User · Answer

I helped build a jQuery plugin called Fillmore  which handles the background-size  cover in browsers that support it  and has a shim for those that don t   Give it a look

User · Answer

You can use the css property object-fit     x000D   x000D   cover   x000D    object-fit  cover  x000D    width  50px  x000D    height  100px  x000D    x000D   lt img src  http   i stack imgur com 2OrtT jpg  class  cover  width  242  height  363    gt  x000D   x000D   x000D    See example here  There s a polyfill for IE  https   github com anselmh object-fit

User · Answer

The only real way is to have a container around your image and use overflow hidden   HTML   lt div class  container  gt  lt img src  ckk jpg    gt  lt  div gt    CSS   container       width  300px      height  200px      display  block      position  relative      overflow  hidden      container img       position  absolute      top  0      left  0      width  100       It s a pain in CSS to do what you want and center the image  there is a quick fix in jquery such as   var conHeight       container   height    var imgHeight       container img   height    var gap    imgHeight - conHeight    2      container img   css  margin-top   -gap     http   jsfiddle net x86Q7 2

User · Answer

CSS solution no JS and no background image   Method 1  margin auto    IE8  - NOT FF      x000D   x000D  div  x000D    width 150px   x000D    height 100px   x000D    position relative  x000D    overflow hidden  x000D    x000D  div img  x000D    position absolute   x000D    top 0   x000D    bottom 0   x000D    margin  auto  x000D    width 100   x000D    x000D   lt p gt Original  lt  p gt  x000D   lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D   x000D   lt p gt Wrapped  lt  p gt  x000D   lt div gt  x000D     lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net 5xjr05dt   Method 2  transform    IE9       x000D   x000D  div  x000D    width 150px   x000D    height 100px   x000D    position relative  x000D    overflow hidden  x000D    x000D   x000D  div img  x000D    position absolute   x000D    width 100   x000D    top  50   x000D    -ms-transform  translateY -50    x000D    -webkit-transform  translateY -50    x000D    transform  translateY -50    x000D    x000D   lt p gt Original  lt  p gt  x000D   lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D   x000D   lt p gt Wrapped  lt  p gt  x000D   lt div gt  x000D     lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net 5xjr05dt 1   Method 2 can be used to center an image in a fixed width   height container  Both can overflow - and if the image is smaller than the container it will still be centered   http   jsfiddle net 5xjr05dt 3   Method 3  double wrapper    IE8  - NOT FF       x000D   x000D   outer  x000D    width 150px   x000D    height 100px   x000D    margin  200px auto     just for example    x000D    border  1px solid red     just for example    x000D       overflow  hidden        TURN THIS ON    x000D    position  relative  x000D    x000D   inner    x000D      border  1px solid green     just for example    x000D      position  absolute  x000D      top  0  x000D      bottom  0  x000D      margin  auto  x000D      display  table  x000D      left  50   x000D    x000D   inner img   x000D      display  block  x000D      border  1px solid blue     just for example    x000D      position  relative  x000D      right  50   x000D      opacity   5     just for example    x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D        lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net 5xjr05dt 5   Method 4  double wrapper AND double image    IE8       x000D   x000D   outer  x000D    width 150px   x000D    height 100px   x000D    margin  200px auto     just for example    x000D    border  1px solid red     just for example    x000D       overflow  hidden        TURN THIS ON    x000D    position  relative  x000D    x000D   inner    x000D      border  1px solid green     just for example    x000D      position  absolute  x000D      top  50   x000D      bottom  0  x000D      display  table  x000D      left  50   x000D    x000D   inner  real image   x000D      display  block  x000D      border  1px solid blue     just for example    x000D      position  absolute  x000D      bottom  50   x000D      right  50   x000D      opacity   5     just for example    x000D    x000D   x000D   inner  placeholder image  x000D    opacity  0 1     should be 0    x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D       lt img class  real image  src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D       lt img class  placeholder image   src  http   i stack imgur com 2OrtT jpg  alt  image   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net 5xjr05dt 26    Method 1 has slightly better support - you have to set the width OR height of image   With the prefixes method 2 also has decent support   from ie9 up   - Method 2 has no support on Opera mini  Method 3 uses two wrappers - can overflow width AND height  Method 4 uses a double image   one as placeholder   this gives some extra bandwidth overhead  but even better crossbrowser support    Method 1 and 3 don t seem to work with Firefox

User · Answer

lt div class  container  gt        lt img src  http   i stack imgur com 2OrtT jpg   gt   lt  div gt    lt style gt   container          width  150px         height  100px         overflow  hidden     lt  style gt

User · Answer

I think it s quite late for this answer  Anyway hope this will help somebody in the future   I faced the problem positioning the cards in angular  There are cards displayed for array of events  If image width of the event is big for card  the image should be shown by cropping from two sides and height of 100    If image height is long  images  bottom part is cropped and width is 100    Here is my pure css solution for this     HTML     lt span class  block clear img-card b-b b-light text-center   ngStyle     background-image     url   event image       gt  lt  span gt    CSS   img-card   background-repeat  no-repeat  background-size  cover  background-position  50  50   width  100   overflow  hidden

User · Answer

Not using css background Only 1 div to clip it Resized to minimum width than keep correct aspect ratio Crop from center  vertically and horizontally  you can adjust that with the top  lef  amp  transform    Be careful if you re using a theme or something  they ll often declare img max-width at 100   You got to make none  Test it out       https   jsfiddle net o63u8sh4    lt p gt Original  lt  p gt   lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt    lt p gt Wrapped  lt  p gt   lt div gt       lt img src  http   i stack imgur com 2OrtT jpg  alt  image   gt   lt  div gt    div    width 150px     height 100px     position relative    overflow hidden    div img    min-width 100     min-height 100     height auto    position relative    top 50     left 50     transform translateY -50   translateX -50

User · Answer

As far as I know  there is a plugin to make this simple  jQuery Plugin  Auto transform  lt img gt  into background style  lt img class  quot fill quot  src  quot image jpg quot  alt  quot Fill Image quot  gt  lt  img gt    lt script gt         quot img fill quot   img2bg     lt  script gt   Besides  this way also fulfills the accessibility needs  As this plugin will NOT remove your  lt img gt  tag from your codes  the screen reader still tells you the ALT text instead of skipping it

User · Answer

To fit image in fullscreen try this   background-repeat  round

User · Answer

If you want to use the image as a CSS background  there is an elegant solution  Simply use cover or contain in the background-size CSS3 property    x000D   x000D   container   x000D    width  150px  x000D    height  100px  x000D    background-image  url  http   i stack imgur com 2OrtT jpg    x000D    background-size  cover  x000D    background-repeat  no-repeat  x000D    background-position  50  50   x000D    x000D   lt div class  container  gt  lt  div gt   x000D   x000D   x000D    While cover will give you a scaled up image  contain will give you a scaled down image  Both will preserve the pixel aspect ratio   http   jsfiddle net uTHqs   using cover   http   jsfiddle net HZ2FT   using contain   This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs  quick guide   It s worth mentioning that browser support for both attributes excludes IE6-8

User · Answer

Try something like this  http   jsfiddle net D7E3E 4   Using a container with overflow  hidden  EDIT   Dominic Green beat me

User · Answer

Building off of  Dominic Green s answer using jQuery  here is a solution that should work for images that are either wider than they are high or higher than they are wide   http   jsfiddle net grZLR 4   There is probably a more elegant way of doing the JavaScript  but this does work   function myTest       var imgH       my-img   height      var imgW       my-img   width      if imgW  gt  imgH            container img   css  height    100         var conWidth       container   width        var imgWidth       container img   width        var gap    imgWidth - conWidth  2          container img   css  margin-left   -gap       else           container img   css  width    100         var conHeight       container   height        var imgHeight       container img   height        var gap    imgHeight - conHeight  2          container img   css  margin-top   -gap         myTest

User · Answer

This will Fill images to a specific size  without stretching it or without cropping it  img      width 150px     your requirement size     height 100px    your requirement size    Scale down will take the necessary specified space that is 150px x 100px without stretching the image       object-fit scale-down

User · Answer

after reading StackOverflow answers the simple solution I got is  profilePosts div    background  url  quot xyz quot    background-size  contain  background-repeat  no-repeat  width  x  height  y

User · Answer

Enhancement on the accepted answer by  afonsoduarte   in case you are using bootstrap  There are three differences    Providing width 100  on the style   This is helpful if you are using bootstrap and want the image to stretch all the available width   Specifying the height property is optional  You can remove keep it as you need  cover      object-fit  cover     width  100        height  300px   optional  you can remove it  but in my case it was good        By the way  there is NO need to provide the height and width attributes on the image element because they will be overridden by the style  so it is enough to write something like this   lt img class  quot cover quot  src  quot url to img     quot     gt

User · Answer

Another solution is to put the image in a container with the desired width and height   Using this method you would not have to set the image as a background image of an element   Then you can do this with an img tag and just set a max-width and max-height on the element   CSS    imgContainer       display  block      width  150px       height  100px      imgContainer img       max-width  100       max-height  100       HTML    lt div class  imgContainer  gt       lt img src  imagesrc jpg    gt   lt  div gt    Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting   If you want to center the image vertically and horizontally you can change the container css to    imgContainer       display  table-cell      width  150px       height  100px      text-align  center      vertical-align  middle      Here is a JS Fiddle http   jsfiddle net 9kUYC 2

[css] CSS Image size, how to fill, but not stretch?

Examples related to css

Examples related to image