如果您严格使用当前的最佳做法来制作HTML文档，以使样式保持在标记之外，那么您如何最好地传达图像尺寸调整的信息呢？

过去的最佳实践希望图像的高度和宽度与图像一致比等待图片下载以获取尺寸的浏览器渲染速度更快。但是这样做似乎违反了隔离文档的样式。

为每个图像添加一个id属性，并将高度/宽度放入CSS中？这会否定内联图像高度和宽度的渲染奖励吗？

#1 楼

不建议在IMG元素中使用宽度和高度，这绝对是告诉浏览器图像的宽度和高度的最佳方法。竭尽全力去做另一种方式是多余的和不必要的（并且可能很愚蠢）。不要为自己或浏览器做任何不必要的工作。坚持有效的基础。

评论

...也不要忘记ALT标签，即使其为空白，否则合规检查人员也会抱怨。

–塔尔维·瓦蒂亚（Talvi Watia）
2010-09-20 17:40


@Tchalvak对不起，但你错了。您可以通过服务器端编程和/或JavaScript动态覆盖宽度和高度。而且根据您的逻辑，您也不能覆盖内联样式。

–John Conde♦
2011年3月9日15:07


糟糕，无论如何我似乎都缺少css覆盖，这是错误的，css中的！important确实允许您覆盖width和height属性，因此最初使用width / height效果很好。现在，我仍然处于拒绝投票的位置。如果您想编辑答案，我会更改它。耸耸肩不是那么重要。

– Kzqai
2011年9月9日15:15


#2 楼

约翰·康德（John Conde）的回答很明确。图片具有宽度和高度-它是内容的一部分，而不是样式。因此，这里无需进行“分隔”。

但是，有一个例外：如果您有许多相同大小的图像（例如缩略图），则图像尺寸的CSS很有用。在这里，最好使用CSS类来缩减HTML并加快开发速度。

对于网站的设计（包括按钮和图标），最好的解决方案是CSS sprites。

评论

+ 1，css子画面在站点速度上产生了可笑的差异。

– Kzqai
2011-3-9 15:21