Image 使用onload-in-HTML标记以50%本机大小显示图像时出现问题

尝试以50%的原始大小显示各种大小和纵横比的图像

–不能预先缩小分辨率，因为它们在高分辨率显示器上看起来分辨率很低

–

width:50%

根据容器div的宽度而不是原始图像的大小来缩小它们，所以这不起作用

–

transform:scale（0.5）

正确缩放图像，但父div保留原始大小

–

几乎解决了我的问题，因为这样可以正确缩放图像，并且父div可以向下缩放以适应它。但是，父div需要指定一个max width，这似乎妨碍了这种方法。我推断，如果原始图像超过父div的宽度，则它已经从原始大小缩小，然后onload（）函数从该图像的缩小版本而不是原始大小缩小

请参阅此链接：

本例中的图像是表格的图像–所有表格的所有单元格都应具有相同的宽度和高度。当图像都是全尺寸时，就是这种情况，但请注意，在它们的缩小版本中，一些表格的单元格要小得多-当原始尺寸的图像（大4倍）超过页面宽度时，就会发生这种情况

有什么想法吗

---

非常类似，但我在那里找不到解决方案。

我可能已经找到了一个可能的解决方案，使用naturalWidth属性：

<img src="" onload="this.width=this.naturalWidth/2">

这似乎避免了已经缩小的图像进一步缩小的问题，因为它看到了图像的本机宽度

它适用于Firefox、Chrome和Opera，但在Safari中，图像高度与宽度不成比例，因此必须单独定义