响应式<picture>元素加载AVIF/WEBP时误用fallback <img>宽高导致变形问题

HTML 规范中 <source> 标签本身不支持 width 和 height 属性，你写在 <source> 上的宽高属性会被所有浏览器直接忽略。渲染 <picture> 元素包裹的图片时，浏览器只会读取内部 <img> 标签上的宽高属性和对应 CSS 样式：

• 新版本 Chrome、Safari 会自动匹配已加载图片资源的原始尺寸，覆盖 <img> 上声明的固定宽高，所以显示正常
• 低版本 Firefox、iOS 14 及以下的 Safari 没有做这层兼容，直接使用 <img> 上写死的 245*34 尺寸渲染实际分辨率为 65*65 的移动端 avif/webp 资源，就会出现拉伸变形

你只需要补充少量 CSS 即可解决问题，同时完全满足 Google PSI 避免 CLS 的要求：

1. 给 <picture> 内部的 <img> 标签添加自定义类名，比如：

<img src="/images/logo-title.png" alt="logo" aria-label="logo" width="245" height="34" class="site-logo">

2. 补充对应响应式 CSS：

/* 默认桌面端尺寸，和img属性一致 */
.site-logo {
  width: 245px;
  height: 34px;
  object-fit: contain; /* 额外兜底，避免任意场景下出现拉伸 */
}
/* 移动端断点覆盖尺寸 */
@media (max-width: 767px) {
  .site-logo {
    width: 65px;
    height: 65px;
  }
}

这个方案兼容所有浏览器版本，同时保留了 <img> 标签上的显性宽高属性，不会影响 PSI 的 CLS 评分。

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