title: Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
body: <p>I've used the CSS flex box layout which appears as shown below: </p>
  
  <p><img src="https://i.stack.imgur.com/apFaX.jpg" alt="enter image description here"></p>
  
  <p>If the screen gets smaller it turns into this: </p>
  
  <p><img src="https://i.stack.imgur.com/3mFzk.jpg" alt="enter image description here"></p>
  
  <p>The problem is that the images are not resized keeping the aspect ration from the original image. </p>
  
  <p><strong>Is it possible to use pure CSS and the flex box layout to let the images be resized if the screen gets smaller?</strong></p>
  
  <p>Here is my html: </p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>my CSS: </p>
  
  <pre><code>.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;
  
  }
  </code></pre>