Расскажите о изображениях в HTML. Если я отброшу изображение на страницу без каких-либо ограничений, он примет свой "естественный размер" --- то есть буквальный размер изображения в пикселях. Если я укажу CSS max-width
и max-height
, то он будет сохранять естественное соотношение сторон, но масштабируется, чтобы соответствовать ограничению размера. Отлично!
Я хочу, чтобы это точное поведение на произвольном элементе. То есть, я хочу создать <div>
или что-то еще, что имеет естественный размер (который я бы указал в пикселях) и поддерживал его соотношение сторон при воздействии max-width
и max-height
. (Бонусные очки: было бы здорово, если бы технология поддерживала также min-width
и min-height
.)
Вот еще информация, которую я собрал:
-
Для изображения HTML5 вы можете прочитать естественный размер изображения с атрибутами
naturalWidth
иnaturalHeight
, если атрибутcomplete
равен true. К сожалению, поскольку MDN указывает, эти свойства доступны только для чтения и специфичны для элементов изображения. -
Немного поиска не удалось найти решение только для CSS, что заставляет меня думать, что его может не существовать. Я также соглашусь с решениями JavaScript, но они должны быть надежными для изменения размера окна и размера родительского элемента.