javascript - 当 overflow-x 设置为隐藏时，处理可变高度图像的最佳方法是什么

Question

我有一个非常高分辨率的图像，可以在任何尺寸的显示器上显示。高度将始终完整显示，宽度将可通过 JavaScript 滚动。包含元素的溢出-x 设置为隐藏。我的问题是如何最好地处理可变高度并仍然保持正确的比例。

谢谢你的帮助。

Answer 1

如果您只设置其中一个尺寸（height或width, max 和 min 也适用），另一个将按比例缩放并保持纵横比。

Answer 2

您可以尝试使用 max-height 属性。该值可以是像素或百分比。

max-height: 100%

或者

max-height: 200px; /* whatever height */

这将按比例约束图像。