javascript - 如果 max-width 和 max-height 都已设置，有没有办法防止延迟加载图像的内容重排？

Question

在我正在处理的网站上，我试图防止在图像加载时发生内容重排。我正在使用反应。在我的特殊情况下，我的解决方案必须：

• 处理不同纵横比的图像。（例如，如果是 3:2 图像，则保持 3:2。如果是 16:9，则保持 16:9）
• 支持 max-height 和 max-width CSS 属性。（在我的情况下max-height = 60vh;，max-width = 100%;如果有帮助的话。）

我已经阅读了padding-toporpadding-bottom方法。由于第 1 点，它们不起作用，因为padding-top和padding-bottom必须是硬编码的，并且图像并不都具有相同的纵横比。当我使用 JSX 动态更改padding-topandpadding-bottom时，当图像碰到max-heightor时它开始扭曲max-width。我不知道我还能做什么。

谢谢！

标签： javascripthtmlcssreactjsfrontend