如何结合JPEG / webp / jpg2000 / JPEG XR与响应图像使用srcset和大小？
提问于 2020-12-28 17:07:27
我真的很困惑如何最好地实现不同的下一代(JPEG / webp / jpg2000 / JPEG )图像格式与响应源图像？
我想有不同大小的图像为不同的屏幕宽度，但也不同的分辨率从不同的下一代图像格式。还有一个后备方案。如何写下来，当我说：
1张图片有4种大小，有jpeg，webp，jpg2000，jpg xr格式，有3个不同的断点。
我认为我可以使用<图片>元素，在这个元素中我将使用< srcset >，但我只是在一个站点上看到：“<图片>元素的子元素< img >是必需的，该子元素不应该有自己的srcset和size属性，因为该功能将转移到< source >元素。”
回答 2
Stack Overflow用户
发布于 2020-12-28 19:50:03
我想出了如何在标签中使用srcset+sizes的答案：
<picture class="my-first-class">
<source
type="image/webp"
sizes="(min-width: 701px) 22vw,
(min-width: 1000px) 19vw,
35vw"
srcset="
img/hilti-png/hilti-png_190.webp 190w,
img/hilti-png/hilti-png_321.webp 321w,
img/hilti-png/hilti-png_420.webp 420w,
img/hilti-png/hilti-png_507.webp 507w,
img/hilti-png/hilti-png_584.webp 584w,
img/hilti-png/hilti-png_653.webp 653w,
img/hilti-png/hilti-png_718.webp 718w,
img/hilti-png/hilti-png_781.webp 781w,
img/hilti-png/hilti-png_842.webp 842w,
img/hilti-png/hilti-png_900.webp 900w,
img/hilti-png/hilti-png_955.webp 955w,
img/hilti-png/hilti-png_1006.webp 1006w,
img/hilti-png/hilti-png_1060.webp 1060w,
img/hilti-png/hilti-png_1111.webp 1111w,
img/hilti-png/hilti-png_1160.webp 1160w,
img/hilti-png/hilti-png_1210.webp 1210w,
img/hilti-png/hilti-png_1260.webp 1260w,
img/hilti-png/hilti-png_1309.webp 1309w,
img/hilti-png/hilti-png_1353.webp 1353w,
img/hilti-png/hilti-png_1380.webp 1380w">
<source
type="image/jpeg"
sizes="(min-width: 701px) 22vw,
(min-width: 1000px) 19vw,
35vw"
srcset="
img/hilti-png/hilti-png_190.jpg 190w,
img/hilti-png/hilti-png_321.jpg 321w,
img/hilti-png/hilti-png_420.jpg 420w,
img/hilti-png/hilti-png_507.jpg 507w,
img/hilti-png/hilti-png_584.jpg 584w,
img/hilti-png/hilti-png_653.jpg 653w,
img/hilti-png/hilti-png_718.jpg 718w,
img/hilti-png/hilti-png_781.jpg 781w,
img/hilti-png/hilti-png_842.jpg 842w,
img/hilti-png/hilti-png_900.jpg 900w,
img/hilti-png/hilti-png_955.jpg 955w,
img/hilti-png/hilti-png_1006.jpg 1006w,
img/hilti-png/hilti-png_1060.jpg 1060w,
img/hilti-png/hilti-png_1111.jpg 1111w,
img/hilti-png/hilti-png_1160.jpg 1160w,
img/hilti-png/hilti-png_1210.jpg 1210w,
img/hilti-png/hilti-png_1260.jpg 1260w,
img/hilti-png/hilti-png_1309.jpg 1309w,
img/hilti-png/hilti-png_1353.jpg 1353w,
img/hilti-png/hilti-png_1380.jpg 1380w">
<img src="img/hilti-png/hilti-png_781.jpg"
alt="hilti"
class="my class">
</picture>Stack Overflow用户
发布于 2020-12-28 17:24:25
对于不支持PICTURE的浏览器，需要使用PICTURE中的IMG元素作为后备。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65481282
复制相关文章
腾讯云开发者
