以最大尺寸的html显示视网膜屏幕截图

问题描述

我有一些高分辨率的屏幕截图，我想将它们添加到博客文章中。

我想以原始视网膜（正常分辨率的2倍）显示它们，因此我应用了按比例缩小的变换：

.retina {
  transform: scale(0.5);
}

但我也希望没有任何图片的高度不超过500px：

.max-size {
    max-width: 500px;
    max-height: 500px;
}

但是，我希望选择这2个选项中的最大选项。这对于小于500px * 500px的图像非常有效（因为它们不受最大尺寸限制的缩放的影响）。但是，如果我的iPhone屏幕快照高度大于2000px，我希望它以500px显示（因为这也可以满足scale(0.5)转换），但是按照以下规则，它会按比例缩小所有达到250像素的方式：

img {
    transform: scale(0.5);
    max-width: 500px;
    max-height: 500px;
}

基本上，应该在应用max限制之前应用缩放，但是事实并非如此（在Safari和Chrome中测试）。感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html retina