问题描述
我想使用 tailwind css 在我的网页中设置响应式图像。我提供了足够的类来使其在不同的屏幕尺寸上工作。现在我的页面速度出现以下错误。
如何消除警告？
解决方法
您可以通过在图像中添加 width 和 height 来消除此警告，如下所示：
<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />
基本上将 width 和 height 直接添加到 html img 标签可以防止布局偏移，即使 img 尚未加载。当 img 是延迟加载时，这一点尤其重要。更多信息here
仅添加高度和宽度属性和类是行不通的，您还必须将图像裁剪到其确切尺寸。比如你设置了100px的高度和宽度，图片的高度和宽度也应该是100px。
,背景
存在此警告是为了防止图像加载时发生布局偏移。目前，图像具有 w-5/6 mx-auto 类。这足以使图像具有响应性，但在加载图像之前，浏览器不知道图像有多高。因此，当图片加载时，布局会发生偏移。
然后，您需要在加载图像之前告诉浏览器和高度该图像应该有多宽。有几种方法可以做到这一点。
已知尺寸
如果您知道图像的高度，我建议您遵循 fromaline 的回答。
<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />
因为我们使用 w-5/6 定义了显示宽度，所以图像将具有响应性。然后将 width='300' 和 height='300' 属性用于纵横比。
以下是来自 Tailwind playground 的链接，向您展示了它如何响应并消除布局偏移：https://play.tailwindcss.com/rjz9ylFNl5?size=482x720
尺寸未知
如果您不知道图像的宽度和高度并且您需要它们具有响应性，您基本上需要创建一个具有固定纵横比的容器。我建议您查看 aspect ratio plugin。
<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
<img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full' />
</div>
再次，指向 Tailwind Playground 演示的链接：https://play.tailwindcss.com/2zmPJixbrO?size=584x720