Масштабировать div в направлении вверх, а не вниз?

У меня есть пользовательское информационное окно над картой google, иногда эти информационные окна содержат изображение. Когда они это сделают, информационное окно масштабируется вниз по маркеру, который он позиционирует, как только изображение закончит загрузку.

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

Я действительно верю, что есть способ проверить, закончилось ли изображение загруженным, но это кажется длинным маршрутом - нет ли простого способа с JS или CSS, чтобы заставить div масштабироваться вверх, а не вниз.

У кого-нибудь есть подсказки?

Ответ 1

Используйте абсолютное позиционирование и вместо установки смещения с помощью top используйте bottom. С помощью этого свойства вы можете обеспечить положение нижнего края вашего div - любое изменение размера заставит div расширяться вверх.

Ответ 2

или попробуйте это (также может быть полезно установить привязку)

<div style="position: absolute;">
  <div style="margin-top: calc(-70vh + 40px);"><a id="update">my image</a></div>
</div>