CSS force image resize and keep aspect ratio

Question

I am working with images  and I ran across a problem with aspect ratios    lt img src  big image jpg  width  900  height  600  alt      gt    As you can see  height and width are already specified  I added CSS rule for images   img     max-width 500px      But for big image jpg  I receive width 500 and height 600  How I can set images to be re-sized  while keeping their aspect ratios

User · Answer

The background-size property is ie  9 only  but if that is fine with you  you can use a div with background-image and set background-size  contain   div image      background-image  url  your url here        background-size  contain      background-repeat  no-repeat      background-position  center      Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally within the div  Just don t forget to set the sizes on the css since divs don t have the width height attribute on the tag itself   This approach is different than setecs answer  using this the image area will be constant and defined by you  leaving empty spaces either horizontally or vertically depending on the div size and image aspect ratio   while setecs answer will get you a box that exactly the size of the scaled image  without empty spaces    Edit  According to the MDN background-size documentation you can simulate the background-size property in IE8 using a proprietary filter declaration      Though Internet Explorer 8 doesn t support the background-size property  it is possible to emulate some of its functionality using the non-standard -ms-filter function    -ms-filter   progid DXImageTransform Microsoft AlphaImageLoader src  path relative to the HTML file   sizingMethod  scale

User · Answer

Here is a solution     img      width  100      height  auto     object-fit  cover      This will make sure the image always covers the entire parent  scaling down and up  and keeps the same aspect ratio

User · Answer

I think  in finally that this is the best solution  easy and simple   img       display  block      max-width  100       max-height  100       width  auto      height  auto

User · Answer

https   jsfiddle net sot2qgj6 3   Here is the answer if you want to put image with fixed percentage of width  but not fixed pixel of width   And this will be useful when dealing with different size of screen   The tricks are   Using padding-top to set the height from width  Using position  absolute to put image in the padding space  Using max-height and max-width to make sure the image will not over the parent element  using display block and margin  auto to center the image    I ve also comment most of the tricks inside the fiddle     I also find some other ways to make this happen  There will be no real image in html  so I personly perfer the top answer when I need  img  element in html   simple css by using background http   jsfiddle net 4660s79h 2   background-image with word on top http   jsfiddle net 4660s79h 1   the concept to use position absolute is from here http   www w3schools com howto howto css aspect ratio asp

User · Answer

Set the CSS class of your image container tag to image-class    lt div class  image-full  gt  lt  div gt    and add this you your CSS stylesheet    image-full       background  url    some image     no-repeat      background-size  cover      background-position  center center

User · Answer

To force image that fit in a exact size  you don t need to write too many codes  It s so simple    x000D   x000D  img  x000D      width  200px  x000D      height  auto  x000D      object-fit  contain     Fit logo in the image size    x000D          -o-object-fit  contain     Fit logo fro opera browser    x000D      object-position  top     Set logo position    x000D          -o-object-position  top     Logo position for opera browser    x000D        x000D   lt img src  http   cdn sstatic net Sites stackoverflow company img logos so so-logo png  alt  Logo  gt  x000D   x000D   x000D

User · Answer

Just add this to your css  It will automaticly shrink and expand with keeping the original ratio   img       display  block      max-width  100       max-height  100       width  auto      height  auto

User · Answer

x000D   x000D  img   x000D    display  block  x000D    max-width 230px  x000D    max-height 95px  x000D    width  auto  x000D    height  auto  x000D    x000D   lt p gt This image is originally 400x400 pixels  but should get resized by the CSS  lt  p gt  x000D   lt img width  400  height  400  src  http   i stack imgur com aEEkn png  gt  x000D   x000D   x000D    This will make image shrink if it s too big for specified area  as downside  it will not enlarge image

User · Answer

To maintain a responsive image while still enforcing the image to have a certain aspect ratio you can do the following   HTML    lt div class  ratio2-1  gt      lt img src     image png  alt  image  gt   lt  div gt    And SCSS    ratio2-1     overflow  hidden    position  relative      amp  before       content          display  block      padding-top  50      ratio 2 1        img       position  absolute      top  0      left  0      bottom  0      right  0          This can be used to enforce a certain aspect ratio  regardless of the size of the image that authors upload   Thanks to  Kseso at  http   codepen io Kseso pen bfdhg  Check this URL for more ratios and a working example

User · Answer

Very similar to some answers here  but in my case I had images that  sometimes were taller  sometimes larger    This style worked like a charm to make sure that all images use all available space  keep the ratio and not cuts    img      object-fit  contain     max-width  100      max-height  100      width  auto     height  auto

User · Answer

You can create a div like this    lt div class  image  style  background-image url   to your image    gt  lt  div gt    And use this css to style it   height  100   width  100   background-position  center center  background-repeat  no-repeat  background-size  contain     this can also be cover

User · Answer

Firefox  71   2019-12-03  and Chrome  79   2019-12-10  support internal mapping of the width and height HTML attributes of the IMG element to the new aspect-ratio CSS property  the property itself is not yet available for direct use   The calculated aspect ratio is used to  reserve space for the image until it is loaded  and as long as the calculated aspect ratio is equal to the actual aspect ratio of the image  page    jump    is prevented after loading the  image  For this to  work  one of the  two image dimensions must be overridden via CSS to the  auto value   IMG  max-width  100   height  auto       lt img src  quot example png quot  width  quot 1280 quot  height  quot 720 quot  alt  quot Example quot    gt   In the example  the aspect ratio of  16 9  1280 720  is maintained even if the image is not yet loaded and the effective image width is less than 1280 as a  result of max-width  100   See also the related Firefox bug  392261

User · Answer

Fullscreen presentation   img data-attribute   height  100vh     Keep in mind that if the view-port height is greater than the image the image will naturally degrade relative to the difference

User · Answer

This is mental  Use the scale-down property - it explains itself  Inline styling   lt img src   nic-cage png  style    maxWidth   50    objectFit   scale-down       gt   This will stop flex from stretching it  In this case  the image would go to 50  of the width of its parent container and the height would scale down to match  Keep it simple

User · Answer

How about using a pseudo element for vertical alignment  This less code is for a carousel but i guess it works on every fixed size container  It will keep the aspect ratio and insert  gray-dark bars on top bottom or left write for the shortest dimension  In the meanwhile the image is centered horizontally by the text-align and vertically by the pseudo element        gt  li         float  left        overflow  hidden        background-color   gray-dark        text-align  center          gt  a img         gt  img           display  inline-block          max-height  100           max-width  100           width  auto          height  auto          margin  auto          text-align  center                    Add pseudo element for vertical alignment of inline  img         amp  before           content              height  100           display  inline-block          vertical-align  middle

User · Answer

You can set the container to display  flex and align-items  center  other align-items values work too   Instead of align-items you can also set align-self on the image itself

User · Answer

The solutions below will allow scaling up and scaling down of the image  depending on the parent box width   All images have a parent container with a fixed width for demonstration purposes only  In production  this will be the width of the parent box   Best Practice  2018    This solution tells the browser to render the image with max available width and adjust the height as a percentage of that width    x000D   x000D   parent   x000D    width  100px  x000D    x000D   x000D  img   x000D    display  block  x000D    width  100   x000D    height  auto  x000D    x000D   lt p gt This image is originally 400x400 pixels  but should get resized by the CSS  lt  p gt  x000D   lt div class  parent  gt  x000D     lt img width  400  height  400  src  https   placehold it 400x400  gt  x000D   lt  div gt  x000D   x000D   x000D    Fancier Solution   With the fancier solution  you ll be able to crop the image regardless of its size and add a background color to compensate for the cropping    x000D   x000D   parent   x000D    width  100px  x000D    x000D   x000D   container   x000D    display  block  x000D    width  100   x000D    height  auto  x000D    position  relative  x000D    overflow  hidden  x000D    padding  34 37  0 0 0     34 37    100    w   h    100    640   220     x000D    x000D   x000D   container img   x000D    display  block  x000D    max-width  100   x000D    max-height  100   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    x000D   lt p gt This image is originally 640x220  but should get resized by the CSS  lt  p gt  x000D   lt div class  parent  gt  x000D     lt div class  container  gt  x000D       lt img width  640  height  220  src  https   placehold it 640x220  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    For the line specifying padding  you need to calculate the aspect ratio of the image  for example   640px  w    100  220px  h       640 220   2 909 100 2 909   34 37    So  top padding   34 37

User · Answer

Remove the  height  property    lt img src  big image jpg  width  900  alt     gt    By specifying both you are changing the aspect ratio of the image  Just setting one will resize but preserve the aspect ratio   Optionally  to restrict oversizings    lt img src  big image jpg  width  900  alt    style  max-width 500px  height auto  max-height 600px    gt

User · Answer

If the application can have an image of any aspect ratio or resolution then you can manage height and width as in this link  This uses Javascript and HTML https   stackoverflow com a 65090175 13338731

User · Answer

You can use this   img        width  500px       height  600px       object-fit  contain       position  relative       top  50        transform  translateY -50

User · Answer

I would suggest for a responsive approach the best practice would be using the Viewport units and min max attributes as follows   img    display  block    width  12vw    height 12vw    max-width 100     min-width 100px    min-height 100px    object-fit contain

User · Answer

x000D   x000D  img   x000D    max-width  80px     Also works with percentage value like 100     x000D    height  auto  x000D    x000D   lt p gt This image is originally 400x400 pixels  but should get resized by the CSS  lt  p gt  x000D   lt img width  400  height  400  src  https   i stack imgur com aEEkn png  gt  x000D   x000D   lt p gt Let s say the author of the HTML deliberately wants x000D    the height to be half the value of the width  x000D    this CSS will ignore the HTML author s wishes  which may or may not be what you want  x000D   lt  p gt  x000D   lt img width  400  height  200  src  https   i stack imgur com aEEkn png  gt  x000D   x000D   x000D

User · Answer

This will make image shrink if it s too big for specified area  as downside  it will not enlarge image    The solution by setec is fine for  Shrink to Fit  in auto mode   But  to optimally EXPAND to fit in  auto  mode  you need to first put the received image into a temp id   Check if it can be expanded in height or in width  depending upon its aspect ration v s the aspect ratio of your display block          temp image   attr  src   str jpg    load function             callback to get actual size of received image          define to expand image in Height      if      temp image   height         temp image   width     gt  display aspect ratio                 image   css  height   max height of box               image   css  width    auto          else               define to expand image in Width             image   css  width   max width of box               image   css  height   auto                Finally put the image to Completely Fill the display area while maintaining aspect ratio          image   attr  src   str jpg          This approach is useful when received images are smaller than display box  You must save them on your server in Original Small size rather than their expanded version to fill your Bigger display Box to save on size and bandwidth

User · Answer

I ve struggled with this problem quite hard  and eventually arrived at this simple solution  object-fit  cover  width  100   height  250px   You can adjust the width and height to fit your needs  and the object-fit property will do the cropping for you  More information about the possible values for the object-fit property and a compatibility table are available here  https   developer mozilla org en-US docs Web CSS object-fit Cheers

[css] CSS force image resize and keep aspect ratio

Examples related to css

Examples related to image

Examples related to aspect-ratio