定义不带高度和宽度的img标签

Question

w3c规范指出宽度和高度是隐含的而不是必需的。无论如何，我总是被告知你应该把它放进去。如果我没有记错，他的理由是浏览器可能无法正确检测图像大小。这是真的？

Answer 1

它回到了Netscape在v4和更早版本中的黑暗日子。渲染引擎是原始的，并且在构建页面并计算出大小时不会“回流”内容。如果您没有指定图片大小，一旦图片下载并解析了高度/宽度，整个页面的渲染就会暂停（或整个页面的刷新将被取消）。从用户的角度来看，这看起来很糟糕，所以规则总是要指定一个大小。

现在，引擎更好，并且可以优雅地处理未指定的图像大小。回流内容仍然是一个相当昂贵的操作，但从用户的角度来看，看起来很酷，因为随着图像的弹出和文本的移动，事物会滑动/流动。

Answer 2

原因是如果你不把它们放进去，浏览器会放入一个默认大小，下载图像，找到实际大小，然后不得不围绕新大小重新流动所有东西。

重新流动是昂贵的操作 - 屏幕上的渲染必须更新每个这样的图像。

如果提供大小，浏览器将放入正确大小的占位符，并且在下载图像后不必重新流动。

Answer 3

根据我的经验，不提供宽度和高度标签将导致浏览器呈现原始大小的图像。

我发现这种行为在现代浏览器中是一致的。另外，我总是试图以我想要渲染的大小提供图像，以减少使用的带宽量并确保图像质量。

Answer 4

我不确定浏览器没有正确检测到它，我从来没有见过这种情况。

但是要回答你的问题，我认为答案更多取决于你正在努力做什么，可能会做什么，这会产生变化。

例如，如果您要添加的图像是需要符合预定高度/宽度的横幅广告，那么通过所有方法，硬编码高度和宽度。

但是，如果图像是可能随时间而变化的东西，我会建议不要编码高度和宽度，因为这很可能意味着新图像（如果不是与旧图像相同的高度/宽度）现在会被扭曲。在动态网站上，图像一直在变化的情况下尤其如此。