我一直以为您可以指定<img/>的width和height属性，以便浏览器无需先下载（至少是标题）即可知道其物理尺寸。但显然，这些属性被视为CSS属性-因此，当您尝试执行类似width: 50%; height: auto之类的操作时，这些属性将被覆盖。然后，在下载图像之前，计算出的高度保持为0。
是否可以通过HTML / CSS显式设置图像的物理尺寸（有效地确定其长宽比）？
（...并避免使用“砌体”时出现“长宽比未知的闪光” /紧张的重新布局-您也许可以解决，但我对基本问题更感兴趣。即使我在询问中也很挣扎简洁地说:)
最佳答案
因此，一旦我们通过CSS设置了height: auto，浏览器就会忽略由width和height HTML属性设置的固有大小。
可能的解决方法和将来的可能解决方案：
使用内在比率框黑客
<div style="height: 0; padding-bottom: 42.857%; position: relative">
<img style="position: absolute; left: 0; height: 0; width: 100%; height: 100%" … />
</div>
使用数据URI和JavaScript预加载具有相同长宽比的占位符（请注意舍入错误！）
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////wAALCAAPACMBAREA/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwDQgoICv//Z"
onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
如果我们使用“模糊占位符”技术，则该框架可能已经存在。
与两个相同，但使用SVG-易于即时创建，但显然没有“免费”模糊占位符
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
width='350px' height='150px'%3E%3C/svg%3E"
onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
如果＆cc
intrinsicsize登陆（WICG，github/Chrome）并被采用，将有一种正确的方法：<img intrinsicsize="350x150" width="…
当然，所有这些都有缺点。
您可以在this Pen中尝试2和3-这将需要更多的工作和测试，我可能会等待4，我认为它已解决了一些不需要修复的问题。愚蠢的浏览器:)