Javascript img naturalWidth意外返回值

我有一个反应迅速的形象：

<img 
    class="post-card-image" 
    srcset="/content/images/size/w300/2021/04/photo-1459411552884-841db9b3cc2a.jpeg 300w,
           /content/images/size/w600/2021/04/photo-1459411552884-841db9b3cc2a.jpeg 600w,
           /content/images/size/w1000/2021/04/photo-1459411552884-841db9b3cc2a.jpeg 1000w,
           /content/images/size/w2000/2021/04/photo-1459411552884-841db9b3cc2a.jpeg 2000w"
   sizes="(min-width: 1200px) 600px, (min-width: 768px) 50vw, 100vw" 
   src="/content/images/size/w600/2021/04/photo-1459411552884-841db9b3cc2a.jpeg"
   alt="Publishing options"
   loading="lazy" />

.grid{
显示：网格；
网格模板列：1fr；
最大宽度：1200px；
保证金：0自动；
}
@介质（最小宽度：768px）{
.电网{
网格模板柱：1fr 1fr；
}
}
.卡片图像{
位置：相对位置；
宽度：100%；
高度：300px；
}
.卡图像img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

naturalWidth/Height返回图像的固有密度校正宽度/高度

我想，对于像JPEG这样的位图图像，其内在维度是非常清楚的。
难点在于“密度校正”的含义

在内部，当选择图像源时，它具有一个值。该值的确定方法如下（）：

• 如果从图像的

  src

  中选择图像源，则它是

  1

• 如果从

  srcset

  属性中选择图像源，并且图像源具有（n

  x

  ），则使用此描述符的值
• 如果从

  srcset

  属性中选择图像源，并且图像源具有，则像素密度表示宽度描述符值除以使用的源大小。此源大小是在
  的

  size

  属性中定义的

这是第三种情况。
为了减少动态性，让我们在

size

属性中设置一个唯一的

50vw

值

const img1=document.getElementById（“带srcset的img”）；
window.addEventListener（'load'，（事件）=>{
log（“img1.naturalWidth:”，img1.naturalWidth）；
log（“img1.currentSrc:”，img1.currentSrc）；
const src=img1.currentSrc；
常量宽度描述符=src.slice（src.lastIndexOf（“w=”）+2）；
//在我们的例子中，内在宽度与宽度描述符相同
常数固有宽度=宽度描述符；
const source_size=innerWidth*0.5；//50vw
常数密度=宽度\描述符/源\大小；
常量预期大小=固有宽度/密度；
log（“预期：”，预期的大小）；
});
因为。MDN页面有相当多的细节，所以可能值得一读（谢天谢地，不是很长）。我在这里发布之前确实读过，它说“这是图像自然绘制的宽度，当没有为图像建立约束或特定值时。”，这就是为什么我希望在MDN示例中的值为2000，他们使用的是一个400x398图像，在css中为200px，naturalWith返回400。在我的例子中，我使用的是100vw（375）渲染的2000x2450，naturalWith给我的是375而不是2000。你肯定在等待选择哪个图像被加载，例如使用onload处理程序吗？MDN声明它们与负载处理一起运行代码。仅仅有一个src可能还不够。请看一个将其设置为100%宽度的示例：现在自然宽度是视口的宽度（以CSS像素为单位），针对DPI缩放进行了校正。那么：您的
实际应用了什么CSS？也就是说，
.post card image
定义为什么？谢谢。所以我想我们不应该使用
naturalWidth
来获取文件中的“真实”img宽度？是的，他们在我脑海中打破了它。。。不过，您仍然可以使用offscren图像，使用
currentSrc
。