如何在加载之前保持图像大小固有，以便布局稳定？

Question

我一直认为你可以指定一个<img/>'swidth和height属性，这样浏览器就知道它的物理尺寸，而不必先下载（至少是标题）。但显然这些属性被视为 CSS 属性 - 因此当您尝试执行类似width: 50%; height: auto. 然后，在下载图像之前，计算的高度保持为 0。
有没有办法通过 HTML/CSS 显式设置图像的物理尺寸（实际上是它的纵横比）？

（...并避免“未知长宽比的闪光”/使用 Masonry 时要进行大量紧张的重新布局 - 您也许可以解决这个问题，但我对基本问题更感兴趣。即使我正在努力询问简明扼要地介绍一下:)

Answer 1

更新到 2021 年，我们现在拥有一种广泛支持的符合标准的方法来执行此操作，即使用 CSS纵横比属性。

您可以简单地使用高度和宽度，如下所示：

.myimage {
  width: 50%;
  height: auto;
  aspect-ratio: 1280 / 720;
}

这将首先计算宽度为父元素的 50%，然后，将高度设置为 auto（最好将其显式设置为 auto，以防其他东西改变高度以提高可维护性），它将使用方面的值 -比来计算应保留的高度。

即使在加载图像后，这也会影响图像元素。这意味着如果宽高比属性与图像的实际宽高比不匹配，图像将被拉伸以适应。您可以通过在前面添加“auto”值来防止这种情况。

aspect-ratio: auto 1280 / 720;

这样，它将在加载图像之前使用定义的宽高比并且知道实际的宽高比，然后在浏览器知道固有的宽高比后回退到自动。

Internet Explorer 和 Safari 等非标准浏览器不支持此功能，因此如果您想在纯粹使用 CSS 的浏览器中实现此功能，则需要继续使用kubi 的答案中的第一个解决方法（作为旁注，第四个选项现在没有也从未成为标准的一部分）。

然而，如果是在今天，这个问题可能不会被问到（至少不是同一个人），因为现在有一个 HTML 解决方案，它是旧的、预响应式网页设计 HTML 解决方案。大多数现代浏览器现在使用图像元素的高度和宽度属性来计算纵横比，而 CSS 高度和宽度会覆盖这些值，除非它们设置为自动。

所以...

<img src='myimage.jpg' class='myimage' width='1280' height='720' />

.myimage {
  width: 50%;
  height: auto;
}

现在，即使在 Safari 中，也会保留正确的垂直高度。截至目前，仍有一些特定于浏览器的实现说明需要考虑。

在 Chromium 和 Firefox 中，目前使用 CSS 宽高比属性来实现，并在计算的宽高比前面添加“auto”。

aspect-ratio: auto attr(width) / attr(height);

由于在我撰写本文时 Safari 还不支持宽高比属性，因此它的实现有一些细微差别。因此，如果 src 属性中没有有效的图像值，它不会保留空间，这意味着如果您使用老式的基于 JavaScript 的图像延迟加载，则需要包含后备图像。

无论如何，您应该尽可能在图像标签中包含高度和宽度属性。他们现在确实做了一些事情。

Answer 2

因此，一旦我们height: auto通过 CSS设置，浏览器就会忽略由width和heightHTML 属性设置的内在大小。

可能的解决方法和未来可能的解决方案：

1. 使用内在比率框黑客

   <div style="height: 0; padding-bottom: 42.857%; position: relative">
     <img style="position: absolute; left: 0; height: 0; width: 100%; height: 100%" … />
   </div>
   

2. 使用数据 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'"/>
   

   如果我们使用“模糊占位符”技术，框架可能已经存在。
3. 与两个相同，但使用 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'"/>
   

4. 如果 & 一旦intrinsicsize登陆（WICG，github/Chrome）并被采用，就会有一个正确的方法来做到这一点：

   <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////wAALCAAPACMBAREA/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwDQgoICv//Z"
     onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
   

当然，所有这些都有缺点。
你可以在这支笔中尝试 2 和 3 - 它需要更多的工作和测试，我可能会等待 4，我认为这是对不需要修复的东西的修复。愚蠢的浏览器:)