Calculate the rendered rect of img content (useful with object-fit: contain)

getRenderedRect.js

/**
 * Calculate the rendered rect of img content (useful with object-fit: contain)
 * @param {HTMLImageElement} img
 * @return {object} rect of the object (the coordinate origin is top-left).
 */
export function getRenderedRect (img) {
  const style = window.getComputedStyle(img)
  const pos = style.getPropertyValue('object-position').split(' ')
  const contains = style.getPropertyValue('object-fit') === 'contain'

  const ratio = {
    intrinsic: img.naturalWidth / img.naturalHeight,
    element: img.width / img.height
  }

  const rect = { width: img.width, height: img.height }

  const isElementRatioHigher = ratio.element > ratio.intrinsic

  if (contains ? isElementRatioHigher : !isElementRatioHigher) {
    rect.width = img.height * ratio.intrinsic
  } else {
    rect.height = img.width / ratio.intrinsic
  }

  rect.left = (img.width - rect.width) * parseFloat(pos[0]) / 100
  rect.right = rect.left + rect.width
  rect.top = (img.height - rect.height) * parseFloat(pos[1]) / 100
  rect.bottom = rect.top + rect.height

  return rect
}