The block with the picture shrinks to arbitrary sizes, why?

Question

Layout

Hello.

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

blocks (flex elements) are added to the flex container using JS, each flex element contains 2 main blocks: .menu-imgblock (block with image) and .menu-item-body (block with content)
.menu-imgblock blocks are given width and height, but even without images, the blocks have different sizes.
It is not clear what this could be related to.



When inserting pictures, I used answers from the topic:
How to fill a block with a picture without a background?

Pictures initially have different sizes and the option is not considered when the pictures are processed and reduced to the same size.
When inserting images into a block, the following occurs: the sizes of the blocks containing the image do not match the specified



Question: how to make pictures of different sizes fill a block of given sizes and at the same time maintain normal proportions
, it should look like this:

Answer 1

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

Answer 2

For .menu-img, you need to write height: 100% instead. Or vice versa, height: 100%; width: auto if you want the image to be full height, but different widths are allowed.
.menu-img { width: 100%; height: auto }