При display: flex изображение увеличивается не пропорционально относительно высоты. Как исправить?

Question

[mosikus]

Здравствуйте. Есть *код*.
Когда в .buttons-keyboard задаю display: flex (мне это нужно, чтобы расположить картинку ровно по вертикали относительно кнопки с помощью justify-content: center) изображение начинает неправильно отображаться, а именно, не пропорционально увеличивается в размере.

.imglight {  height: 55%; width: auto; display: inline; }

Если же задать

.imglight {  height: auto; width: 55%; display: inline; }

, то уже будет пропорционально, но мне нужно увеличивать изображение относительно высоты, а не ширины. Как это правильно сделать ?

Answer 1

[Мария Коробкоголовых]

object-fit: contain; , к imglight бы помог, но IE не поддерживает это свойство

Проще было бы сделать изображение бэкграундом

Если бэкграундом не вариант, придётся сделать для изображения обёртку: как-то так

Советую почитать про Aspect Ratio

Answer 2

[Froggyweb]

либо object-fit: cover
либо дополнительная обертка для изображений

Comments

[mosikus]

Это не помогает.