HTML：浏览器如何渲染图像以进行布局？

Question

1. 当最初呈现时，网络浏览器分配了多少布局空间：
   <img src="image.jpg" />

2. 当最初呈现时，网络浏览器分配了多少布局空间：
   <img src="image.jpg" style="max-height:100px; max-width:200px" />

3. 当最初呈现时，网络浏览器分配了多少布局空间：
   <img src="image.jpg" style="min-height:50px; min-width:110px" />

4. 当最初呈现时，网络浏览器分配了多少布局空间：
   <img src="image.jpg" height="97" width="134" />

更新

我想要确定的是，如果浏览器首先分配0x0然后在获得维度后扩展布局，或者......在使用min / max-height / width的情况下 - 浏览器是否实际分配这么多空间，然后一旦它具有实际尺寸就更新布局。

Answer 1

我不确定为什么这对你来说很重要，但现在是：

1. 没有空间，直到加载一些图像。然后，它会根据jpg第一部分中加载的元数据扩展到实际图像的大小。这是在文件完全加载之前。 在Internet Explorer中，大小是x-icon加上任何alt文本的大小。在其他一些浏览器中，大小只是alt文本的大小。
2. 与1相同
3. 110x50，直到加载一些图像。然后它扩展到实际图像的大小。
4. 134x97总是。

但是你应该知道浏览器经常在很短的时间内多次渲染同一页面，特别是在阅读图像元数据之后。

您可以通过指定不存在的文件来查看它们的初始大小，例如：

<img src="thisfiledoesntexist.jpg" alt="Text that may be visible" />

Answer 2

无论多么想要。

您必须在所关注的所有浏览器中执行测试才能获得答案。