max-width of img inside flexbox doesn't preserve aspect ratio

Question

I'm trying to use flex to simply vertically center an img inside div, but it is working differently in each browser.

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
</div>

https://jsfiddle.net/e0m2d6hx/

It is good in chrome, but in IE and FF it looks like it doesn't work with max-width.

Can anyone help me with this? I know that I can center the img without flex but I want to understand this.

Interesting problem. FF seems to think that whatever is inside a flex box, should itself be flexible as well. Even if you remove the align-self property, the larger image still behaves that way. Not sure about a workaround. — Mr Lister, Aug 06 '15 at 12:21

score 26 · Accepted Answer · edited Jun 20 '20 at 09:12

How to fix IE and Firefox

The following changes should result in the same result across Chrome, Firefox and IE:

Add flex: 0 0 auto; to .flex-item img. This fixes IE
Add object-fit: scale-down; to .flex-item img. This fixes Firefox

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-item {
  height: 222px;
  width: 200px;
  border: 1px solid lightgray;
  padding: 5px;
  margin: 5px;
}
.flex-item img {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  -webkit-align-self: center;
  margin: auto;
  object-fit: scale-down;
}
.item-image {
  border: 1px solid lightgray;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 190px;
  height: 120px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
    </div>
  </div>
  <div class="flex-item">
    <div class="item-image">
      <img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
    </div>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/7yyf3nob/

Why does this happen?

Unfortunately I can't explain why the result between the browsers is so different other than it would appear that the natural resizing properties of an img are lost when using the flexbox model in IE and Firefox. flexbox is still a relatively new model and the vendors are still refining their implementations.

score 0 · Answer 2 · edited Oct 02 '22 at 13:59

Images in flex items are not resized correctly with max-width:PERCENTAGE

Modified version of the W3C CSS Flexbox example :

<!DOCTYPE html>
<html>
 <head>
  <title>
   W3C FLEX EXAMPLE MODIFIED TO ADD FLEX TOOLBAR
   https://www.w3schools.com/css/css3_flexbox.asp
  </title>
  <style>
   body{
    font-size: 3vh;
   }
   .flexToolbar {
     background-color: DodgerBlue;
     display: flex;
     flex-basis: 64%;
     flex-wrap: nowrap;
     font-size: 1.5vh;
     font-weight: bolder;
   }
   .flexToolbar > div {
    /* https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div */
    align-self: flex-end;
    background-color: transparent;
    width: 100px;
    margin-left: 2vw;
    /* Your flex items are set to "min-width: auto", which gives them a min-width equal to their intrinsic width. 
       If you style your .container divs with "min-width: 0" you get the behavior I think you expect. 
       https://bugzilla.mozilla.org/show_bug.cgi?id=1109992
    */
    min-width: 0;
    text-align: center;
   }
   .flexToolbarImage {
    height: auto;
    max-width: 64%;
   }
  </style>
 </head>
 <body>
 <h1>Flexible Boxes</h1>
  <div class="flexToolbar">
   <div>
    <img id="dbImport" class="flexToolbarImage" src="db.import.png" alt="IMPORT DB" />
    IMPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbNew" class="flexToolbarImage" src="db.new.png" alt="NEW DB" />
    NEW
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbCreate" class="flexToolbarImage" src="db.create.png" alt="CREATE TABLE" />
    CREATE
   </div>
   <div>
    <img id="dbDrop" class="flexToolbarImage" src="db.drop.png" alt="DROP TABLE" />
    DROP
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbInsert" class="flexToolbarImage" src="db.insert.png" alt="INSERT ROWs" />
    INSERT
   </div>
   <div>
    <img id="dbUpdate" class="flexToolbarImage" src="db.update.png" alt="UPDATE ROWs" />
    UPDATE
   </div>
   <div>
    <img id="dbDelete" class="flexToolbarImage" src="db.delete.png" alt="DELETE ROWs" />
    DELETE
   </div>
   <div>
    <img id="dbSelect" class="flexToolbarImage" src="db.select.png" alt="SELECT ROWs" />
    SELECT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbSQL" class="flexToolbarImage" src="db.sql.png" alt="WRITE SQL"/>
    SQL
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbExport" class="flexToolbarImage" src="db.export.png" alt="EXPORT DB" />
    EXPORT
   </div>
   <div>
    <img class="flexToolbarImage" src="vertical.line.png" alt="|" />
   </div>
   <div>
    <img id="dbRun" class="flexToolbarImage" src="db.run.png" alt="RUN SQL" />
    RUN
   </div>
  </div>
  <p>Try to resize the browser window.</p>
  <p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
  <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
 </body>
</html>

max-width of img inside flexbox doesn't preserve aspect ratio

2 Answers2

How to fix IE and Firefox

Why does this happen?

Linked