object-fit仅缩放图片内容不改变元素尺寸，如何用JS获取图片实际渲染宽高？

方法1：计算获取img内容实际渲染尺寸 #

没有可以直接缩放元素本身的类object-fitCSS属性，你可以通过比例计算直接拿到img内部内容的实际渲染尺寸：

1. 通过img元素的naturalWidth、naturalHeight属性获取图片原始宽高
2. 分别计算图片原始宽高比、容器（此处为窗口）宽高比
3. 按照object-fit: contain的规则对比两个比例，即可算出实际渲染的宽高

对应代码示例：

const img = document.querySelector('img')
// 需等待图片加载完成后再计算尺寸
img.onload = () => {
  // 图片原始宽高比
  const imgRatio = img.naturalWidth / img.naturalHeight
  // 容器（窗口）宽高及比例
  const containerWidth = window.innerWidth
  const containerHeight = window.innerHeight
  const containerRatio = containerWidth / containerHeight

  let renderWidth, renderHeight
  if (imgRatio > containerRatio) {
    // 图片宽高比大于容器，宽度撑满容器，高度按比例缩放
    renderWidth = containerWidth
    renderHeight = renderWidth / imgRatio
  } else {
    // 图片宽高比小于等于容器，高度撑满容器，宽度按比例缩放
    renderHeight = containerHeight
    renderWidth = renderHeight * imgRatio
  }

  // 将计算得到的实际渲染尺寸赋值给canvas
  const canvas = document.createElement('canvas')
  canvas.width = renderWidth
  canvas.height = renderHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, renderWidth, renderHeight)
  // 替换原有img元素
  img.parentElement.appendChild(canvas)
  img.remove()
}

方法2：直接用canvas实现无拉伸铺满效果 #

你也可以不用依赖img元素的object-fit做布局，直接通过上述比例计算逻辑，在canvas绘制时实现和contain/cover一致的无拉伸效果，同时保留图片预加载的优势：只需保留隐藏的img元素做预加载即可，不需要它参与页面布局。
对应代码示例：
CSS部分：

* {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* 预加载用图片隐藏，不参与布局 */
.preload-bg {
  display: none;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

HTML部分：

<img class="preload-bg" src="https://via.placeholder.com/150" alt="背景图预加载">
<canvas id="bgCanvas"></canvas>

JS部分和方法1的计算逻辑一致，直接调用drawImage绘制即可。

内容的提问来源于stack exchange，提问作者hopperelec