问题标签 [picturefill]

我有这样的事情：

我也在使用图片填充。

我的问题是 firefox 和 chrome（我目前正在测试的 2 个）都只会加载 big.jpg，即使在小屏幕上也是如此。还检查了控制台的网络跟踪。

我的 css 将 img 设置为基本流体：

那么我的代码有什么问题？

图片元素为

在 Angular 4 中不起作用它为所有视口宽度选择第一个源，在上面的示例中是 image1.png

对此有任何解决方案吗？

我们在codepen上有以下代码。我们遇到的问题是我们使用<picture>属性来渲染基于 的图像viewport，但无法让图像占用与覆盖在图像上的文本相同的空间量。

密码详细信息：

1. 当前文本具有background-color: #eee，因此您可以看到文本占用的区域。
2. 图像和文字都有position: absolute，但可以改变它。
3. 基于viewport，我们总是希望<source>标签中的图像只占用文本占用的内容。

目标：

1. 使图像占用与覆盖在顶部的文本相同的高度和宽度
2. 使用<picture>和<source>
3. 不style: background-image('path/to/image')使用<div class="item__img">
4. 打开裁剪图像以使其适合，但希望它在没有裁剪的情况下完成。

当前的问题：

期望的输出

我们如何image在其顶部的文本扩展时进行扩展？

我想在所有浏览器中使用 jxr、webp 和 jp2 格式。

我尝试使用图片标签和图片填充来解决这个问题。

在 Chrome 和 Firefox 中它显示 webp 图像，但在 IE 和 Edge 中它总是显示 jpg 图像。IE支持jxr格式，为什么总是显示JPG图片而不是jxr呢？

我在 React 中遇到了“图片”元素的问题，尤其是 safari 浏览器。Safari 总是从“img”元素 src 中获取图像，并根据媒体属性从适当的“源”元素中获取图像。

这似乎在其他浏览器（chrome 和 firefox）中运行良好。

我为此创建了一个代码框。

将不胜感激任何帮助。提前致谢。

仅供参考：我也尝试过使用图片填充 polyfill。但没有帮助。因此，认为这与 react + safari 引擎组合有关。

如何修复 CSS 以便在缩小时不会丢失分辨率？

这是HTML：

用于<img>：

用于<span>：

（有多个类，因为原始代码来自模板，我只是对其进行修改。如果您知道如何使这更简单，请告诉我！）

演示的屏幕截图如下。注意图像分辨率有多差。原始的 example.png 非常清晰，分辨率很高。

如何修复 CSS 以便在缩小时不会丢失分辨率？

我也看过一个Similar Question Here，但没​​有太大帮助。

我也尝试使用Picturefill，我无法完全理解如何在我的情况下使用它。

我正在使用 fetch 检查我的图像是否存在，然后返回 true/false 以替换原始图像。

但是，这让我在 fetch 和 fetch.then 之间感到困惑。然后，当我只将 url 放入 fetch() 以检查其状态时，使用 if 条件对我来说效果很好，然后我尝试使用 fetch(url).then (response => ...) 做同样的事情，它输出不同的结果。

我期望这两种方式应该输出相同的结果，有没有盲点？

根据图片元素规范：

零个或多个源元素，后跟一个 img 元素，可选择与脚本支持元素混合。

图片元素是一个容器，它为其包含的 img 元素提供多个来源......它代表它的子元素。

因此，假设以下 HTML 在语义上更正确是否安全？

当使用<picture>HTML 并且您指定多个源并且每个源具有媒体属性时，浏览器是否会自动同时呈现两个源或仅加载一个源，除非调整屏幕大小？

例如：

浏览器会发出 2 个服务器请求，一个用于 /someimage.webp，另一个用于 /somesmallerimage.webp？或者它会根据屏幕大小只发出 1 个服务器请求？如果是后者，在调整屏幕大小时，服务器是否会再次发出请求？如果是前者，有没有办法将一个<picture>元素延迟加载到 DOM 中以避免多个服务器请求？

我正在使用如下代码：

我希望当像某些版本的 Safari 这样的浏览器不支持 Webp 图像格式时，根据媒体查询回退到以下源而不是直接到 "default_img.jpg" 。

但取而代之的是，我得到的是直接回退到：

有谁知道我做错了什么？