Автоматическое изменение размера изображения в макете 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;

}


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