Reactjs 盖茨比与反应钩砌体-我可以加载媒体与纵横比？

我有一辆盖茨比，车上有大量的jpgs/gifs/mp4s，正在使用。因为它是在列中加载的，所以实际上有一种不受欢迎的口吃加载，在这种情况下，图像有点像是撞到了一起，并相互推倒

我希望JPG/GIF/MP4在加载时淡入，而不是跳入并推送内容，但我不确定如何做到这一点，我认为我需要以某种方式编程纵横比。请注意，我不能每次都使用盖茨比图像来计算纵横比，因为我还使用与盖茨比图像不兼容的GIF和mp4s

调用盖茨比的图像，我使用Netlify CMS来主持媒体。盖茨比图像仅具有JPG的纵横比功能，但图像是稀疏的。我的另一个想法是，也许我需要在Netlify CMS中创建一个字段，该字段采用纵横比，但这看起来很笨拙

如果有人有任何建议，我会非常感激，谢谢

您应该使用来优化图像。它有一个延迟加载功能，所以图片不会在屏幕上出现时才开始加载

你提到的纵横比也是盖茨比图像plguin的一个特点

但不管怎样，这些图片相互推动，因为它们的大小不同。您应该使用盖茨比图像来“裁剪”图像或调整其大小

或者您可以将它们放在一个容器div中，该容器div在给定的纵横比下具有固定的大小。然后，您可以简单地将图像以100%的宽度、自动高度和属性放入其中