定义没有高度和宽度的img标签

Question

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

Answer 1

它回归到V4和旧版本中Netscape的黑暗时代。渲染引擎是原始的，在构建页面和计算出大小时不会“重排”内容。如果您没有指定图像大小，则在下载图像并解析高度/宽度后，整个页面的渲染将暂停（或者整页刷新将被拉出）。从用户的角度来看，这看起来很糟糕，因此规则总是指定一个大小。

如今，引擎更好，可以优雅地处理未指定的图像大小。回流内容仍然是一个有点昂贵的操作，但从用户的角度来看确实看起来很酷，因为当图像弹出并且文本转换为容纳它们时，事物会滑动/流动。

Answer 2

原因是如果你没有把它们放进去，浏览器会把默认大小放入，下载图像，找到实际大小，然后必须重新流动新大小的所有内容。

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

如果您提供尺寸，浏览器会放入一个尺寸正确的占位符，并且在下载图像后无需重新流动。

Answer 3

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

我发现这种行为在现代浏览器中是一致的。

另外，我总是尝试以我想要渲染的尺寸提供图像，以减少使用的带宽量并确保图像质量。

Answer 4

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

但是要回答你的问题，我认为答案更多地取决于你想要做什么，而且可能做什么，这会产生不同。

例如，如果您要添加的图片是横幅广告，需要符合预定的高度/宽度，那么无论如何都要硬编码高度和宽度。

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