Анимируйте div между ограниченной шириной и ограниченной высотой, сохраняя при этом то же соотношение сторон, что и img. ⇐ Html

[Anonymous]

У меня есть элемент div, содержащий изображение. Изображение предоставляется пользователем, поэтому оно может быть высоким, широким или квадратным. По умолчанию я хочу сохранить изображение с фиксированной высотой 36 пикселей, а его ширина расширяется по мере необходимости в соответствии с соотношением сторон, но при взаимодействии с пользователем я хочу преобразовать его в больший размер, который составляет 40% области просмотра. При следующем щелчке я хочу вернуть его к исходному макету.
Вот мой текущий код. Следующие вещи не работают:

• Размер изображения не анимируется, в то время как содержащий его элемент div работает.
• Анимация не происходит в противоположном направлении.

Как этого добиться? Мне хотелось бы использовать решение на основе CSS – подойдет либо переход, либо анимация.

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

let small = true;

document.onclick = () => {
const container = document.getElementById('container');
container.className = small ? 'large' : 'small';
small = !small;
}

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

#container {
/* The div should wrap the image with a margin on all sides */
display: inline-block;
text-align: center;
transition: all 2s linear;

height: 36px;
max-height: 36px;
max-width: 360px;

background-color: lightgrey;
margin: 10px;
}

.large#container {
/* Width constrained to 40vw, height allowed to grow according to image aspect ratio */
height: auto;
width: 40vw;
max-width: 40vw;
max-height: 100vh;
}

img {
max-height: calc(100% - 10px);
max-width: calc(100% - 10px);
}

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

Click anywhere to animate.

[img]https://baconmockup.com/300/200[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... -keeping-t