尝试以原始尺寸的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非常相似，但是我在那里找不到解决方案。