html - 将 CSS 响应式图像宽度和高度与 Google 结构化数据建议结合使用

Question

Google 表示最好将 img 的宽度和高度放在 html 中:“网络浏览器甚至可以在下载图像之前开始呈现页面”

See Here

<img src="some-address.jpg" width="20px" height="20px">

但是，如果 img 在响应式页面中怎么办？
我没有给出任何值，并且 img 运行良好并适应任何尺寸。但是，然后谷歌的结构化数据测试工具报错:“宽度字段的值是必需的”
https://search.google.com/structured-data/testing-tool

我试着给那个值:

<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg"
width="100%" height="auto">

示例如下:JSFiddle

它具有响应能力并且具有值(value)。错误消失了。但我读到 Google 需要数值。

如何在响应式页面中设置 img 的宽度和高度？
我想始终建议使用结构化数据。所以，我必须考虑谷歌测试工具所说的内容。我说得对吗？

Answer 1

这最好通过 css 样式表来完成，因为图像的宽度和高度标签通常被认为是不好的做法。

.imageclass{
  width: 100%;
  max-width: 150px; /* whatever size is the biggest that you want */
  height:auto;
}

<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" class="imageclass" />