Как сверстать такое на flexbox?

Question

[Ulyana]

Не получается сверстать так, чтобы картинка в этом блоке была адаптивной и подгонялась под размер.
Контейнеру задаю display: flex;, а внутри 2 блока.
1 блок- с картиной
2 блок- с описанием

Как сделать чтобы картинка подгонялась под размер.... и максимальную высоту задать какую-то.

Answer 1

[Максим]

Дальше сами - это не бесплатный фриланс клуб : https://codepen.io/topicstarter/pen/WzLvdQ

Comments

[Ulyana]

Вы меня не поняли. проблема как раз таки и заключается в том, что если картинка вертикальная, то она будет на всю высоту, а это не очень красиво.



А так, у меня все сверстано уже. проблема именно с картинкой.

[Ulyana]

https://jsfiddle.net/t5j8bzt8/3/

[Максим]

horosami, а так лучше? https://codepen.io/topicstarter/pen/WzLvdQ

[Ulyana]

Максим Ленский, так я тоже делала. оно сжимает горизонтальные картинки. мне это не надо))
какие еще есть варианты?) я уже по-всякому пробовала

[Максим]

horosami, ну другой вариант - картинку сделать фоном ... по другому не знаю
вы бы макет показали бы ... как это должно отображаться на нужных разрешениях

[Ulyana]

Максим Ленский, фоном не вариант. картинка из бд тянуться будет..((

[Максим]

horosami, но хоть с базы хоть нет значения то не имеет ... какая разница куда вставлять url в steeleshet или же в src ?

[Ulyana]

Максим Ленский, мне надо именно!!!! в img) никаких бэкграундов. хз что делать с этой шаурмой

[Максим]

horosami, а изображения что не могут быть одинаковые ?

[Ulyana]

Максим Ленский, не могут))) если бы бы могли, то тут бы не было этого вопроса. я же писала выше про вертикальные картинки)

[Максим]

horosami, либо встраивайте crop изображений либо у вас ни чего не получится ....раз мы не знаем какого отображения будет : портретная или альбомная ....но я могу ошибиться

[Ulyana]

Максим Ленский, вот такой вы и флексбоксер) но спасибо большое за старание!

[Максим]

horosami, если решите - напишите мне сюда - я хоть увижу что требовалось

Answer 2

[Алмаз Бисенбаев]

align-items делаешь stretch, а саму картинку высотой 100%, растяжение картинки исправляешь добавлением object-fit:cover;

Comments

[Ulyana]

не получилось с object-fit:cover; ))
может поможете по ссылке?

https://jsfiddle.net/t5j8bzt8/3/