HTML-изображения не будут корректно масштабироваться. ⇐ CSS

[Anonymous]

У меня есть следующий HTML-код (упрощенный)

Код: Выделить всё

и этот код CSS:

Код: Выделить всё

.media-bar {
height: 60vh;
display: flex;
}

.media-viewer {
display: flex;
flex-direction: column;
flex: 1;
}

.media-socket {
min-height: 300px; /* Temp */
display: flex;
flex: auto;
justify-content: center;
align-items: center;
}

.input-socket {
justify-content: center;
}

.input-socket-item {
object-fit: contain;
width: 100%;
height: auto;
}

Однако, что бы я ни пытался, я не могу заставить этот .input-socket-item масштабироваться так, как мне хотелось бы (или, честно говоря, вообще, если я не установил вручную высота!). Мне бы хотелось, чтобы он масштабировался в соответствии с .input-socket. Высота изображения не будет уменьшена должным образом, поэтому изображение обрезается. Если я переключу поля ширины и высоты, та же проблема останется, но только с шириной. Буду очень признателен за любую помощь, потому что я не могу этого понять.

Подробнее здесь: https://stackoverflow.com/questions/783 ... e-properly