javascript - 浏览器检测所需的实际图像大小

Question

使用 picture 时标记为 srcset , 我可以为不同的视口(viewport)宽度定义不同的图像源。

然而，我想要的是为浏览器呈现页面后图像占用的实际空间(基于宽度)定义不同的图像源。

例如:

1. 视口(viewport)宽度为 1920px 网站使用的容器大小为 1200px

2. 容器分成两列，每列 600px

3. 第 2 列包含一个宽度为 100% 的图像 - 这将导致宽度为 600 像素
4. 图像供应 400x300px、800x600px 和 1200x900px 的 srcset
5. 浏览器现在应该自动知道选择 800x600px

只要清楚图像始终位于该位置，我就可以使用基于视口(viewport)宽度的 srcset。

不幸的是，我的网站设计是这样的，内容编辑者可以自由添加列/行，甚至嵌套它们。同样在某些时候，列会折叠并始终变为全宽。因此，在渲染 HTML 时，我无法预测图像将获得多少视口(viewport)宽度。

因此，我希望浏览器在将图像呈现给用户时检查图像实际具有多少像素 - 并选择合适的图像。

我已经搜索了很多，但找不到任何相关信息。

这可能吗？

或者说 Javascript 是唯一的解决方案吗？

Answer 1

不，遗憾的是这还不可能。关于元素查询的讨论很多，基本上是适用于元素大小而不是窗口大小的媒体查询。但它们显然很难集成。它也没有语法。经常被提出的经典问题(伪语法)是这样的:

.child {
  width: 500px;
}
.container:min-width(450px) > .child {
  width: 400px;
}

所以我们将 .child 设置为 500px 宽度，但是如果 child 的父级大于 450px，则 .child 的宽度应该为 400px，因此.container 将再次小于 450px，而 .child 再次设置为 500px 等等。这会导致所谓的“循环问题”。

还有其他问题，例如动态布局和浏览器事先并不知道元素将占用多少空间。这可能会导致巨大的性能问题，因为浏览器必须计算太多。

然而，有 JS 库试图实现这一点(例如 EQCSS、CSS-Element-Queries 或 EQJS)，但对于您的情况，自制 JS 可能会更好。不过，我建议您检查一下这些库是如何处理它的。

更多信息:

https://www.xanthir.com/b4PR0

https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690

JS 库:

https://elementqueries.com/

http://marcj.github.io/css-element-queries/

https://github.com/snugug/eq.js