未知容器尺寸下实现background-image cover效果并获取图片原生尺寸

我来帮你搞定这个问题，分两步走：先实现你要的类似cover的背景效果（完全不需要提前知道图片尺寸），再获取图片的原生宽高。

1. 无需图片尺寸，实现块元素的cover背景效果 #

其实你现有的CSS写法已经能实现background-size: cover的效果了，我稍微调整一下让布局更严谨：

首先把.background的定位改成relative，这样#subimage的绝对定位会基于它，而不是整个文档。另外，cover属性本身就会自动缩放图片，让它铺满整个块元素，同时保持图片的宽高比，裁剪超出部分——完全不需要你提前知道图片的原生尺寸。

调整后的CSS示例：

.background{ 
  margin: 0; 
  padding: 0; 
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  position: relative; /* 修正父元素定位，让子元素绝对定位更准确 */
  background: url('https://dummyimage.com/600x400/000/fff') no-repeat center bottom / cover; 
}

#subimage{ 
  background: url("https://dummyimage.com/600x400/000/fff") no-repeat center / cover; 
  position: absolute; 
  left: 24.5%; 
  top: 28.3%; 
  width: 50%; /* 这里可以设任意你需要的尺寸，不用管图片大小 */
  height: 40%; 
  /* 如果你需要维持图片的宽高比，等拿到原生尺寸后可以动态设置aspect-ratio */
}

不管图片原生多大，cover都会自动适配块元素的尺寸，所以这一步完全不用纠结图片尺寸的问题。

2. 获取图片的原生尺寸 #

要拿到图片的原始宽高，我们可以用JavaScript创建一个隐藏的img元素来加载目标图片，然后通过naturalWidth和naturalHeight属性获取原生尺寸——这个方法不会影响你原来的块元素布局，完美适配你的需求：

完整的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .background{ 
      margin: 0; 
      padding: 0; 
      width: 100vw; 
      height: 100vh; 
      position: relative;
      background: url('https://dummyimage.com/600x400/000/fff') no-repeat center bottom / cover; 
    }

    #subimage{ 
      background: url("https://dummyimage.com/600x400/000/fff") no-repeat center / cover; 
      position: absolute; 
      left: 24.5%; 
      top: 28.3%; 
      width: 50%;
      height: 40%;
    }
  </style>
</head>
<body>
  <header>
    <div class="background">
      <div id="subimage"></div>
    </div>
  </header>

  <script>
    // 目标图片的URL，和你背景图的URL保持一致
    const targetImgUrl = "https://dummyimage.com/600x400/000/fff";
    const tempImg = new Image();
    
    // 图片加载完成后执行
    tempImg.onload = function() {
      // 获取原生尺寸，这两个属性不受CSS缩放影响
      const nativeWidth = this.naturalWidth;
      const nativeHeight = this.naturalHeight;
      
      console.log("图片原生宽度:", nativeWidth);
      console.log("图片原生高度:", nativeHeight);
      
      // 如果你想把#subimage的尺寸改成和图片匹配，或者设置宽高比，在这里操作就行
      const subimage = document.getElementById('subimage');
      // 示例：设置成图片的原生尺寸
      // subimage.style.width = `${nativeWidth}px`;
      // subimage.style.height = `${nativeHeight}px`;
      // 示例：设置宽高比和图片一致
      // subimage.style.aspectRatio = `${nativeWidth}/${nativeHeight}`;
    };
    
    // 处理图片加载失败的情况
    tempImg.onerror = function() {
      console.error("图片加载失败，请检查URL是否正确");
    };
    
    // 开始加载图片
    tempImg.src = targetImgUrl;
  </script>
</body>
</html>

这里的关键是naturalWidth和naturalHeight，它们会返回图片文件本身的原始宽高，不管你有没有用CSS缩放图片。而且我们创建的tempImg不会显示在页面上，完全不会干扰你原来的块元素布局。

需要注意的是，必须等图片加载完成后才能获取到正确的尺寸，所以所有逻辑都要放在onload回调里，不然会拿到0值哦。

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