Question

这就是我正在做的事情：

<picture style="display: block; margin:auto;">

    <source media="(min-width: 1080px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.webp">
    <source media="(min-width: 600px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-720.webp">
    <source media="(min-width: 360px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-360.webp">
    <!-- ios media -->
    <source media="(min-width: 1024px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.jpp">
    <source media="(min-width: 750px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-750.jpp">
    <source media="(min-width: 640px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-640.jpg">
    <img src="imagesIndex\hero-images\centaurs-horn-crop-750.jpg" alt="Firenze, Harry Potter's divination teacher poses for a photo for my walking tour on Edinburgh's Royal Mile"  class="center-box"/>

</picture>

包含<picture>个标签。它不起作用，甚至没有后备工作。有工作吗？我是否需要剪切alt文本或其他内容？我能做什么？

这意味着要在两者上工作。并且后备总是意味着工作（实际上在IE中），所以为什么不在这里呢？

这是在移动设备上观看的图片丰富网站，我需要尽可能使用Webp。

网站就在这里 www.pottertour.co.uk/index.html

Answer 1

由于后期.jpg张图片上的文件扩展名，我发现可能存在问题，其中有几张被标记为jpp而不是jpg。

HTML图片元素无法在Edge或Firefox中使用

1 个答案: