Блок с картинкой ужимается до произвольных размеров, почему?

Question

[Светлана]

Здравствуйте.

https://github.com/SvetlanaSharkunova/vanilla-js-m...

во flex-контейнер с помощью JS добавляются блоки (flex-элементы), в каждом flex-элементе находится 2 основных блока: .menu-imgblock (блок с картинкой) и .menu-item-body (блок с контентом)
блокам .menu-imgblock заданы ширина и высота, но даже без картинок, блоки имеют разные размеры.
Непонятно, с чем это может быть связано.



При вставке картинок использовала ответы из темы:
Как заполнить блок картинкой без background?

Картинки изначально имеют разные размеры и не рассматривается вариант, когда картинки обрабатывают и сводят их размеры к одинаковым.
При вставке картинок в блок получается следующее: размеры блоков, содержащих картинку, не соответствуют заданным



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

Answer 1

[Юрий]

.menu-imgblock {
  flex-shrink: 0;
}

Comments

[Светлана]

спасибо! работает идеально.
Еще такой вопрос: а если вот убрать заданную ширину, но оставить заданную высоту, то этот способ уже не работает. Как поступить в этом случае?

[Юрий]

Светлана, почему не работает? Если убрать ширину у .menu-imgblock, он растянется/сожмётся по размеру картинки внутри.

[Светлана]

Юрий, у меня получается ужас ужасный :)

[Юрий]

Светлана, да, в хроме получается красота. Если убрать width: 100% у .menu-img, всё ок.
Но вы таки определитесь, что вам нужно: картинки с исходными пропорциями и разной ширины, или картинки одинаковой ширины в каждой карточке?

Если первое, то можете убирать width: 100%; и object-fit: cover; у картинок.
Если второе, то ширину для .menu-imgblock в любом случае нужно будет задавать. Можно не в пикселях, а в процентах.

[Светлана]

Юрий, исходные картинки разного размера, по факту должны получаться одинаковые блоки.
если я убираю width: 100% у .menu-img, получаются блоки разной ширины...

А вообще, беда у меня с этими картинками, каждый раз - гадание на кофейной гуще, где надо ширину задавать, где не надо, а где надо 100%, а где max-width: 100%....

[Юрий]

Светлана, если все должны быть одинаковыми, то задавайте в явном виде ширину для .menu-imgblock. Раз у вас тут сетка из элементов, то лучше наверное задавать ширину в процентах вместо пикселей, тогда на всех разрешениях картинка будет занимать одни и те же, скажем, 50% от карточки.

[Светлана]

Юрий, поняла Вас. Большое спасибо за помощь!

Answer 2

[4X_Pro]

Для .menu-img нужно прописать
.menu-img { width: 100%; height: auto }
вместо height:100%. Или наоборот, height: 100%; width: auto, если нужно, чтобы картинка была на всю высоту, но при этом допустима разная ширина.