使用picture标签转WebP时出现0x0尺寸及样式定位问题咨询

1. picture标签显示0x0尺寸是否正常？ #

正常。<picture>本质是无内容的容器元素，它仅作为内部<img>的多源图片选择器存在，本身不会渲染可见内容。如果内部<img>设置了absolute绝对定位，会脱离文档流导致<picture>失去支撑内容，自然塌陷成0x0尺寸，这是符合预期的表现。

2. 怎么确认实际加载的是WebP还是PNG？ #

两种简单方法：

• Network面板查请求：打开Chrome开发者工具的「Network」标签，筛选「Images」类型，找到对应图片请求后查看「Response Headers」里的Content-Type字段——image/webp对应WebP格式，image/png对应PNG格式。
• Elements面板看currentSrc：选中<img>标签，在右侧「Properties」面板找到currentSrc属性，它会直接显示浏览器实际加载的图片URL，通过后缀就能分辨格式。

另外注意你代码里第二个<source>的srcset写了http:///localhost（多了一个斜杠），这是无效URL，浏览器会忽略这个源并回退加载<img>的PNG资源，这可能是你看到两者都加载的原因之一，先修正这个URL错误。

3. 样式该加在picture还是img标签上？ #

绝对定位这类布局样式只需要加在<img>标签上，不要重复加在<picture>上。

你当前代码里picture和img都设置了absolute定位，相当于容器和内部元素都脱离文档流，会导致定位逻辑冲突，出现位置错乱。正确做法是把布局样式集中在<img>上，<picture>无需添加任何定位或尺寸样式，让它作为透明容器即可。

修正后的代码示例 #

<picture>
  <source type="image/webp" srcset="http://localhost/images/pirate-footer.webp">
  <source type="image/png" srcset="http://localhost/images/pirate-footer.png">
  <img id="pirate-img-footer" class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14" src="http://localhost/images/pirate-footer.png" alt="海盗页脚图标" loading="lazy">
</picture>

内容的提问来源于stack exchange，提问作者dreid