2

在我的工作中，我们有自己的框架，我们正在尝试考虑实现响应式图像的最佳方式。图像是从后端代码生成的，我们希望有一个可以解决所有用例的控件。

由于 srcset 似乎是响应式图像的最佳解决方案，而 Picture 似乎解决了另外两种情况（艺术指导和 WebP 和 Jpeg XR 等现代图像格式），我们想看看我们是否可以将它们结合起来。

由于图片元素主要与内部带有媒体查询的元素一起使用，因此它是浏览器在满足某些条件时使用它的指令。

Srcset 然而让浏览器根据一些计算来选择图片。

是否有可能将浏览器的选择保留在图片元素中？

例如像这样的东西。

<picture>
    <source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">
    <source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">

    <img src="small.jpg" alt="Some image" />
</picture>

将不胜感激任何帮助:)

4

1 回答 1

1

你是对的。第一个片段是正确的：

   <source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">

第二个不是：

<source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">

您还可以使用 source 元素中的 type 属性来查找浏览器对该图像类型的支持。像这样的东西：

<picture>

<source media = "(max-width: 30em)" type="image/vnd.ms-photo" srcset="images/small/space-needle.jxr 1x, images/small/space-needle-2x.jxr 2x, images/small/space-needle-hd.jxr 3x >
<source media = "(max-width: 30em)" type="image/jpg" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x >
<img src="space-needle.jpg" alt="Space Needle">

</picture>

此处提供更多详细信息。

于 2015-11-25T17:41:36.593 回答