Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio

Question

I ve used the CSS flex box layout which appears as shown below      If the screen gets smaller it turns into this      The problem is that the images are not resized keeping the aspect ration from the original image    Is it possible to use pure CSS and the flex box layout to let the images be resized if the screen gets smaller   Here is my html     lt div class  content  gt     lt div class  row  gt        lt div class  cell  gt         lt img src  http   i imgur com OUla6mK jpg   gt       lt  div gt       lt div class  cell  gt         lt img src  http   i imgur com M16WzMd jpg   gt       lt  div gt     lt  div gt   lt  div gt    my CSS     content       background-color  yellow          row       display  -webkit-box      display  -moz-box      display  -ms-flexbox      display  -webkit-flex      display  flex       -webkit-box-orient  horizontal       -moz-box-orient  horizontal      box-orient  horizontal      flex-direction  row       -webkit-box-pack  center      -moz-box-pack  center      box-pack  center      justify-content  center       -webkit-box-align  center      -moz-box-align  center      box-align  center        align-items  center       background-color  red       cell       -webkit-box-flex  1      -moz-box-flex  1      box-flex  1      -webkit-flex  1 1 auto      flex  1 1 auto        padding  10px      margin  10px       background-color  green      border  1px solid red      text-align  center

User · Answer

I suggest looking into background-size options to adjust the image size     Instead of having the image in the page if you have it set as a background image you can set    background-size  contain  or   background-size  cover  These options take into account both the height and width when scaling the image  This will work in IE9 and all other recent browsers

User · Answer

img  max-width 100    is one way of doing this  Just add it to your CSS code   http   jsfiddle net 89dtxt6s

User · Answer

That s how I would handle different images  sizes and proportions  in a flexible grid    x000D   x000D   images   x000D    display  flex  x000D    flex-wrap  wrap  x000D    margin  -20px  x000D    x000D   x000D   imagewrapper   x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    width  calc 50  - 20px   x000D    height  300px  x000D    margin  10px  x000D    x000D   x000D   image   x000D    display  block  x000D    object-fit  cover  x000D    width  100   x000D    height  100      set to  auto  in IE11 to avoid distortions    x000D    x000D   lt div class  images  gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 800x600    gt  x000D     lt  div gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 1024x768    gt  x000D     lt  div gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 1000x800    gt  x000D     lt  div gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 500x800    gt  x000D     lt  div gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 800x600    gt  x000D     lt  div gt  x000D     lt div class  imagewrapper  gt  x000D       lt img class  image  src  https   via placeholder com 1024x768    gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In the second image it looks like you want the image to fill the box  but the example you created DOES keep the aspect ratio  the pets look normal  not slim or fat    I have no clue if you photoshopped those images as example or the second one is  how it should be  as well  you said IS  while the first example you said  should    Anyway  I have to assume   If  the images are not resized keeping the aspect ration  and you show me an image which DOES keep the aspect ratio of the pixels  I have to assume you are trying to accomplish the aspect ratio of the  cropping  area  the inner of the green  WILE keeping the aspect ratio of the pixels  I e  you want to fill the cell with the image  by enlarging and cropping the image   If that s your problem  the code you provided does NOT reflect  your problem   but your starting example   Given the previous two assumptions  what you need can t be accomplished with actual images if the height of the box is dynamic  but with background images  Either by using  background-size  contain  or these techniques  smart paddings in percents that limit the cropping or max sizes anywhere you want    http   fofwebdesign co uk template  testing scale-img scale-img htm  The only way this is possible with images is if we FORGET about your second iimage  and the cells have a fixed height  and FORTUNATELY  judging by your sample images  the height stays the same    So if your container s height doesn t change  and you want to keep your images square  you just have to set the max-height of the images to that known value  minus paddings or borders  depending on the box-sizing property of the cells    Like this    lt div class  content  gt     lt div class  row  gt             lt div class  cell  gt                 lt img src  http   lorempixel com output people-q-c-320-320-2 jpg   gt         lt  div gt         lt div class  cell  gt                 lt img src  http   lorempixel com output people-q-c-320-320-7 jpg   gt         lt  div gt       lt  div gt   lt  div gt    And the CSS     content       background-color  green      row       display  -webkit-box      display  -moz-box      display  -ms-flexbox      display  -webkit-flex      display  flex       -webkit-box-orient  horizontal       -moz-box-orient  horizontal      box-orient  horizontal      flex-direction  row       -webkit-box-pack  center      -moz-box-pack  center      box-pack  center      justify-content  center       -webkit-box-align  center      -moz-box-align  center      box-align  center        align-items  center       cell       -webkit-box-flex  1      -moz-box-flex  1      box-flex  1      -webkit-flex  1 1 auto      flex  1 1 auto      padding  10px      border  solid 10px red      text-align  center      height  300px      display  flex      align-items  center      box-sizing  content-box    img       margin  auto      width  100       max-width  300px      max-height 100      http   jsfiddle net z25heocL   Your code is invalid  opening tags are instead of closing ones  so they output NESTED cells  not siblings  he used a SCREENSHOT of your images inside the faulty code  and the flex box is not holding the cells but both examples in a column  you setup  row  but the corrupt code nesting one cell inside the other resulted in a flex inside a flex  finally working as COLUMNS  I have no idea what you wanted to accomplish  and how you came up with that code  but I m guessing what you want is this   I added display  flex to the cells too  so the image gets centered  I think display  table could have been used here as well with all this markup

User · Answer

You might want to try the very new and simple CSS3 feature   img      object-fit  contain      It preserves the picture ratio  as when you use the background-picture trick   and in my case worked nicely for the same issue   Be careful though  it is not supported by IE  see support details here

User · Answer

I came here looking for an answer to my distorted images   Not totally sure about what the op is looking for above  but I found that adding in align-items  center would solve it for me   Reading the docs  it makes sense to override this if you are flexing images directly  since align-items  stretch is the default   Another solution is to wrap your images with a div first      myFlexedImage     display  flex    flex-flow  row nowrap    align-items  center

User · Answer

HTML    lt div class  container  gt       lt div class  box  gt           lt img src  http   lorempixel com 1600 1200   alt    gt       lt  div gt   lt  div gt    CSS    container     display  flex    flex-direction  row    justify-content  center    align-items  stretch     width  100     height  100      border-radius  4px    background-color  hsl 0  0   96        box     border-radius  4px    display  flex      box img     width  100     object-fit  contain    border-radius  4px

User · Answer

I am using jquery or vw to keep the ratio  jquery   function setSize         var  h       cell   width            your-img-class   height  h       setSize      window   resize setSize      vw    cell      width 30vw      height 30vw     cell img      width 100       height 100

[html] Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?

Examples related to html

Examples related to css

Examples related to flexbox