5

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

（......并避免在使用 Masonry 时出现“未知纵横比的闪烁”/大量紧张的重新布局 - 你也许可以解决这个问题，但我对基本问题更感兴趣。即使我正在努力询问简而言之:)

4

2 回答 2

8

因此，一旦我们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 intrinsicsize="350x150" width="…

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

于 2019-04-26T11:51:03.157 回答
3

在 2021 年更新后，我们现在有了一种广泛支持的符合标准的方法，即使用 CSS纵横比属性。

您可以像这样简单地使用高度和宽度：

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

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

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

aspect-ratio: auto 1280 / 720;

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

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

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

所以...

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

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

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

在 Chromium 和 Firefox 中，它目前是使用 CSS aspect-ratio 属性实现的，在计算的宽高比前加上“auto”。

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

由于在我写这篇文章的时候 Safari 还不支持 aspect-ratio 属性，所以它的实现有更多的细微差别。因此，如果 src 属性中没有有效的图像值，它将不会保留空间，这意味着如果您使用老式的基于 JavaScript 的图像延迟加载，则需要包含备用图像。

在任何情况下，您都应该尽可能在图像标签中包含高度和宽度属性。他们现在实际上正在做一些事情。

于 2021-07-09T23:42:28.600 回答