Javascript 如果“最大宽度”和“最大高度”都已设置，是否有方法防止延迟加载图像的内容回流？

在我正在开发的网站上，我试图防止在加载图像时出现内容回流。我在用React。在我的特殊情况下，我的解决方案必须：

• 使用不同纵横比的图像。（例如，如果是3:2图像，则保持3:2。如果是16:9，则保持16:9）
• 支持最大高度和最大宽度CSS属性。（在我的例子中，

  max height=60vh；

  和

  max width=100%；

  ，如果有帮助的话。）

我读过关于

填充顶部

或

填充底部

的方法。由于第#1点，它们不起作用，因为

填充顶部

和

填充底部

必须硬编码，并且图像的纵横比并不都相同。当我使用JSX动态更改

填充顶部

和

填充底部

时，当图像到达

最大高度

或

最大宽度

时，它开始失真。我不知道我还能做什么

谢谢

解决了。我使用了SVG，比如。我将纵横比设置为我想要的，并使其行为与原始图像本身类似。然后我用绝对位置将原始图像覆盖在顶部。我使用了SVG，比如。我将纵横比设置为我想要的，并使其行为与原始图像本身类似。然后我用绝对位置将原始图像覆盖在顶部。