Как сохранить пропорции html-контейнера, используя только CSS

Question

Название немного вводит в заблуждение, так как простое сохранение соотношения сторон и элемента html тривиально, используя ширину и padding-bottom или padding-top в процентах. Однако мой сценарий немного отличается. Возможно, решение так же тривиально, но мой мозг жарится.

Так что в моем случае у меня есть содержимое div внутри контейнера div. Предполагается, что контейнер div может иметь любые размеры и размер. Требование состоит в том, что внутренний div должен поддерживать собственное соотношение сторон, но должен также соответствовать либо высоте, либо ширине контейнера div, в зависимости от того, что ближе к соотношению сторон содержимого div.

Так, например, мой контент div имеет соотношение сторон 16: 9. Мой контейнер div в настоящее время имеет ширину 500 пикселей и высоту 1000 пикселей. В этом случае мой контент div будет иметь размер 500px и высоту 281px, с пробелом выше и ниже содержимого div. Теперь контейнер div может быть изменен до 1000px в ширину и 500px в высоту, и в этом случае контент div изменит размер до ширины 889px и высоты 500px, с пробелом слева и справа от содержимого div.

Существует, вероятно, менее запутанный способ объяснить этот сценарий, но опять же, мой мозг жарится сегодня. Любая помощь будет оценена по достоинству.

EDIT: Я ищу только решение для CSS. Я знаю, что это возможно с JS/JQuery.

Answer 1

Что бы вы хотели сделать, это использовать что-то вроде object-fit: cover, чтобы иметь лучшие эффекты в вашем случае. К сожалению, решение только для CSS в этом случае не даст желаемых результатов, как указано выше, необходим JavaScript/jQuery.