мы использовали макет CSS flex box, который выглядит так, как показано ниже:

Если экран становится меньше, он превращается в это:

Проблема заключается в том, что размер изображений не изменяется, сохраняя пропорции исходного изображения.

Можно ли использовать чистый CSS и макет flex box для изменения размера изображений, если экран становится меньше?

Вот мой HTML:

   
    
      <img src="http://i.imgur.com/OUla6mK.jpg">
    
    
      <img src="http://i.imgur.com/M16WzMd.jpg">
    
  

мой 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;

}