Как правильно выводить изображения в bootstrap с сохранением пропорций?

Question

[DocTypeMaster]

Подскажите как реализовать вывод картинок разного размера с сохранением их пропорций в независемости от размеров экрана ?
Пример

Так выглядит на полном экране

А при уменьшении происходит следующее


Важно еще сохранять одинаковую высоту блоков , если есть ссылокчка на пример буду очень рад

Comments

[Ankhena]

Пропорции https://jsfiddle.net/Ankhena/cLhxv7eq/

Важно еще сохранять одинаковую высоту блоков

Одинаковая высота блоков в рамках строки это флексы.
В рамках всех строк - гриды либо js.

На бутстраповские классы сами переводите.

[Антон Литвиненко]

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

[DocTypeMaster]

Антон Литвиненко, это понятно, но пои стили не так работают как бы мне хотелось.

Answer 1

[Антон Романков]

Сделать не , а через background.

background-image: url('./image-path.jpg');
background-position: center center;
background-size: contain;

Но тут будет ограничение - картинки будут обрезаться. Можно поиграться с размером в %.
Но вообще лучше для таких целей подготавливать изображения примерно одного и того же размера, чтобы они аутентично смотрелись.