Как выравнять дочерние картинки контейнеров относительно друг друга по центру?

Question

[g0lovachlena]

Как реализовать данную разметку правильно? Хотелось бы, чтобы вне зависимости от размера картинки, они располагались по центру друг напротив друга. Я конечно могу добиться такого эффекта за счёт разной величины полей у картинки, но не уверен, что это лучший способ решения данной проблемы. Хотелось бы услышать совета, как будет правильней такое реализовать.

Comments

[Rustam Bainazarov]

Flexbox.

Answer 1

[Кирилл Конторович]

Если юзаешь flex, то aling-items: flex-start, если блоки inline, то можно vertical-align: top, ну а текст по низу выравниваешь.

Answer 2

[Ольга Ветер]

ну, очень надеюсь, у вас вся эта полоса с картинками - не некий один контейнер у которого 4 ребенка-картинки?
не факт, что это правильное решение, но первый способ, которым я бы пробовала это делать, вот такой:
у нас есть 4 блока с одним классом, в каждом из которых первым ребенком идет картинка. Я бы задала этой картинке обертку, которая, в свою очередь, для простоты, тоже, пожалуй, была бы флекс-блоком, имела ширину 100% (то есть по родителю) и макетную высоту (по наибольшей из картинок). Ну и выравнивание поставить по центру по обеим flex осям. А для img в данном случае можно width и height вообще прописывать инлайново и в стилях прописать max-height: 100% и object-fit: contain, наверное, не будет лишним.