用 max-height 限制的区域，怎样在移动设备（竖向窄屏）上，也能保持不变形？

[liudaqi]

要显示一块最大宽 /高比为 16:9 的一块区域，专门展示横向图片：

• 如果是 16:10 或者 18:9 的那种尺寸，就按实际的图片大小显示；
• 如果是竖向图片，就只截取图片上面一部分以 16:9 形状显示（如图所示）。但是在移动设备上，各个屏幕 DPI 不同，在一些窄屏上，16:9 都快成 16:16 的正方形了，部分老的 iphone5/5s 这种，甚至会变成将近 16:20 的那种形状。

<div style="width: 640px">
    <div style="width: 100%; max-height: 360px; overflow: hidden;">
        <img src="#" />
    </div>
</div>

尝试了下用 rem 来调试，也适应不了各种不同的 dpi 设备。