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

What is the best way to handle variable height images when overflow-x is set to hidden

本文关键字:图像 高度 最佳 方法 是什么 设置 溢出 隐藏 处理      更新时间:2023-09-26

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

感谢您的任何帮助。

如果您只设置其中一个尺寸(heightwidth,最大值和最小值也适用),另一个尺寸将按比例缩放并保持纵横比。

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

max-height: 100%

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

这将按比例约束图像。