如何使用 Bootstrap 调整图像以遵守 Google Chrome 审核中的指定图像尺寸错误

Question

我正在修改我的 HTML 以提供更好的网站性能。我使用引导程序作为我的 css 样板。我从 Google Chrome 审核控制台收到的错误之一是：

"指定图像尺寸 - 应指定宽度和高度 所有图像以加快页面显示。以下图片 缺少宽度和/或高度：包含所有图像的列表 没有指定特定的高度或宽度。”

我遇到的问题是我使用引导程序，并且大多数图像都使用 img-responsive 类。那么，当我希望图像具有响应性时，如何遵守此规则呢？

提前致谢。

Answer 1

这个问题我想了很久，所以我的可选解决方案是使用 JavaScript 管理断点并注入宽度和高度。问题是你应该用网站上的一张照片来做这个，但是，就像我说的，它是暂时的。

var windowWidth = $(window).width();
if(windowWidth > 700){
   $(".image").attr('width', 232).attr('height', 350);
}

这有助于我避免 chrome 警告和页面加载。

注意：当然，您必须在图像之前加载它。