尝试以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倍(超过页面宽度时，就会发生这种情况。
有什么想法吗？
与这个线程非常相似，但我在那里找不到解决方案。
我可能已经找到了一个可能的解决方案，使用naturalWidth属性：
<img src="" onload="this.width=this.naturalWidth/2">
这似乎是为了避免已经缩小的图像进一步缩小的问题，因为它看到了图像的原始宽度！
它适用于Firefox、Chrome和Opera，但在Safari中，图像高度与宽度不成比例，因此必须单独定义。