Автоматическое изменение размера изображения в макете CSS FlexBox и сохранение соотношения сторон? ⇐ Html

[Anonymous]

Я использовал макет гибкого поля CSS, который выглядит следующим образом:


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


Проблема в том, что размеры изображений не изменяются, сохраняя соотношение сторон исходного изображения.
Можно ли использовать чистый CSS и макет гибкого поля, чтобы изменить размер изображений, если экран становится меньше?
Вот мои HTML и 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;

}

Код: Выделить всё

[img]http://i.imgur.com/OUla6mK.jpg[/img]

[img]http://i.imgur.com/M16WzMd.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/211 ... pect-ratio