如何自适应缩放图片直至宽度或高度占满页面100%？

你需要的是保持图片原始宽高比，缩放时优先让先触及视口边界的边占满100%，完整保留图片内容的适配效果，对应CSS标准属性object-fit的contain属性值；如果需要完全铺满视口不留空白、允许裁剪图片超出部分，可替换为cover属性值。

方案1：纯CSS实现（推荐） #

现代浏览器原生支持，无额外逻辑，性能最优：

/* 全局重置（如果你的图片直接放在body下） */
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 裁剪超出视口的内容，不需要可以去掉 */
}

/* 目标image元素样式 */
.target-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 完整显示图片，至少有一个边占满视口，符合你的核心需求 */
  /* object-fit: cover;  铺满视口不留空白，超出部分裁剪，适合背景类场景 */
  object-position: center; /* 可选，控制图片对齐位置，默认居中 */
}

该方案兼容除IE11外的所有主流浏览器，覆盖99%以上的用户场景。

方案2：JS兼容实现（适配老旧浏览器） #

如果需要兼容不支持object-fit的旧版浏览器，可通过JS动态计算适配规则：

const targetImg = document.querySelector('.target-img')
// 封装适配逻辑
function adjustImgSize() {
  // 获取图片原始宽高
  const naturalW = targetImg.naturalWidth
  const naturalH = targetImg.naturalHeight
  const imgRatio = naturalW / naturalH
  // 获取视口宽高
  const viewportW = window.innerWidth
  const viewportH = window.innerHeight
  const viewportRatio = viewportW / viewportH

  if (imgRatio > viewportRatio) {
    // 图片宽高比大于视口，说明图片更宽，按高度撑满适配
    targetImg.style.height = '100vh'
    targetImg.style.width = 'auto'
  } else {
    // 图片宽高比小于等于视口，说明图片更高，按宽度撑满适配
    targetImg.style.width = '100vw'
    targetImg.style.height = 'auto'
  }
}
// 图片加载完成后执行适配
targetImg.onload = adjustImgSize
// 窗口大小变化时重新适配，可添加防抖优化性能
window.onresize = adjustImgSize

注意事项：必须在图片加载完成后再执行计算，否则无法获取正确的原始宽高值。

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