UMD Web Utilities Library
    Preparing search index...

    Function getResponsiveImageSize

    • Calculates the optimal responsive image size based on container dimensions and viewport constraints. Takes into account the image's natural dimensions, parent container width, and maximum viewport height to determine the best display size that maintains aspect ratio while fitting within constraints.

      Parameters

      • image: { image: HTMLImageElement; maxWindowHeight?: number; parentNode: HTMLElement }

        The HTMLImageElement to calculate size for

      Returns number

      The calculated optimal image height in pixels

      const img = document.querySelector('img');
      const container = document.querySelector('.image-container');

      const optimalHeight = getResponsiveImageSize({
      image: img,
      parentNode: container,
      maxWindowHeight: 800
      });

      img.style.height = `${optimalHeight}px`;
      // Sets the image to an optimal height that fits within constraints