Maintain image aspect ratio when changing height

Question

Using the CSS flex box model  how can I force an image to maintain its aspect ratio   JS Fiddle  http   jsfiddle net xLc2Le0k 2   Notice that the images stretch or shrink in order to fill the width of the container  That s fine  but can we also have it stretch or shrink the height to maintain the image proportions   HTML   lt div class  slider  gt       lt img src  http   www placebacon net 400 300  alt  Bacn  gt       lt img src  http   www placebacon net 400 300  alt  Bacn  gt       lt img src  http   www placebacon net 400 300  alt  Bacn  gt       lt img src  http   www placebacon net 400 300  alt  Bacn  gt   lt  div gt    CSS   slider       display  flex     slider img       margin  0 5px

User · Accepted Answer

For img tags if you define one side then other side is resized to keep aspect ratio and by default images expand to their original size.

Using this fact if you wrap each img tag into div tag and set its width to 100% of parent div then height will be according to aspect ratio as you wanted.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

User · Answer

Most of images with intrinsic dimensions  that is a natural size  like a jpeg image  If the specified size defines one of both the width and the height  the missing value is determined using the intrinsic ratio    - see MDN    But that doesn t work as expected if the images that are being set as direct flex items with the current Flexible Box Layout Module Level 1  as far as I know   See these discussions and bug reports might be related    Flexbugs  14 - Chrome Flexbox Intrinsic Sizing not implemented correctly  Firefox Bug 972595 - Flex containers should use  flex-basis  instead of  width  for computing intrinsic widths of flex items  Chromium Issue 249112 - In Flexbox  allow intrinsic aspect ratios to inform the main-size calculation      As a workaround  you could wrap each  lt img gt  with a  lt div gt  or a  lt span gt   or so   jsFiddle   x000D   x000D   slider   x000D    display  flex  x000D    x000D   x000D   slider gt div   x000D    min-width  0     why  see below     x000D    x000D   x000D   slider gt div gt img   x000D    max-width  100   x000D    height  auto  x000D    x000D   lt div class  slider  gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 0    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 1    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 2    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 3    gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       4 5 Implied Minimum Size of Flex Items      To provide a more reasonable default minimum size for flex items    this specification introduces a new auto value as the initial   value of the min-width and min-height properties defined in   CSS 2 1      Alternatively  you can use CSS table layout instead  which you ll get similar results as flexbox  it will work on more browsers  even for IE8   jsFiddle   x000D   x000D   slider   x000D    display  table  x000D    width  100   x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    x000D   x000D   slider gt div   x000D    display  table-cell  x000D    vertical-align  top  x000D    x000D   x000D   slider gt div gt img   x000D    max-width  100   x000D    height  auto  x000D    x000D   lt div class  slider  gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 0    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 1    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 2    gt  lt  div gt  x000D     lt div gt  lt img src  https   picsum photos 400 300 image 3    gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Declare where display  flex  was given Element  align-items  center

User · Answer

Actually I found out that the container of the image tag need to have a height in order to keep the ratio of the image   for example    container display flex  height 100    img width 100  height auto     then in your html your container will wrap the tag image   lt div class  container  gt  lt img src  image jpg  alt  image    gt  lt  div gt    this work for IE and other browsers

User · Answer

I have been playing around flexbox lately and i came to solution for this through experimentation and the following reasoning  However  in reality I m not sure if this is exactly what happens   If real width is affected by flex system  So after width of elements hit max width of parent they extra width set in css is ignored  Then it s safe to set width to 100    Since height of img tag is derived from image itself then setting height to 0  could do something   this is where i am unclear as to what   but it made sense to me that it should fix it   DEMO     remember saw it here first     slider       display  flex     slider img       height  0       width  100       margin  0 5px      Works only in chrome yet

User · Answer

I just had the same issue  Use the flex align to center your elements  You need to use align-items  center instead of align-content  center  This will maintain the aspect ratio  while align-content will not keep the aspect ratio

User · Answer

To keep images from stretching in either axis inside a flex parent I have found a couple of solutions    You can try using object-fit on the image which  e g   object-fit  contain    http   jsfiddle net ykw3sfjd   Or you can add flex-specfic rules which may work better in some cases   align-self  center  flex  0 0 auto

User · Answer

No need to add a containing div   The default for the css  align-items  property is  stretch  which is what is causing your images to be stretched to its full original height   Setting the css  align-items  property to  flex-start  fixes your issue    slider       display  flex      align-items  flex-start      ADD THIS

User · Answer

This behavior is expected  flex container will stretch all its children by default  Image have no exception   ie  parent will have align-items  stretch property    To keep the aspect ratio we ve two solutions    Either replace default align-items  stretch property to align-items  flex-start or align-self  center etc  http   jsfiddle net e394Lqnt 3    or   Set align property exclusively to the child itself  like  align-self  center or align-self  flex-start etc  http   jsfiddle net e394Lqnt 2

[html] Maintain image aspect ratio when changing height

Examples related to html

Examples related to css

Examples related to flexbox