使用HTML标记中的onload会以原始尺寸的50％显示图像的问题

Question

试图以原始尺寸的50％显示各种尺寸和宽高比的图像。

–不能按比例缩小它们，因为它们在高分辨率显示器上的分辨率非常低。

– width: 50%根据容器div的宽度（而不是原始图像大小）按比例缩小它们，因此这不起作用。

– transform: scale(0.5)正确缩放图像，但父div保留原始大小。

– <img src="" onload="this.height*=0.5">几乎可以解决我的问题，因为这可以正确缩放图像，并且父div可以缩小以适合它。但是，父div需要指定一个最大宽度，这似乎在干扰这种方法。我推断出，当原始图像超出父div的宽度时，它已经从其原始大小按比例缩小，然后onload（）函数从该图像的缩小版本而不是从原始尺寸按比例缩小。

查看此链接：https://jsfiddle.net/trf0412/m4osetd3/。

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

有什么想法吗？

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

Answer 1

我可能使用naturalWidth属性找到了可能的解决方案：

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

这似乎避免了已经缩小的图像在看到图像的原始宽度时会进一步缩小的问题！

它可以在Firefox，Chrome和Opera中运行，但是在Safari中，图像高度不会与宽度成比例地缩放，因此必须单独定义。