采用HTML<picture>实现WEBP支持时，如何正确配置max-width属性？

你之前的所有写法出问题，本质上是对<picture>标签的默认渲染特性、以及CSS百分比宽度的计算逻辑理解有偏差，两个关键规则导致所有异常表现：

1. UA默认样式特性：浏览器内置样式表中，<picture>是行内非替换元素，既没有默认的块级宽度，也没有自带的图片尺寸约束，本身的宽度完全由内部<img>元素的固有尺寸撑开。
2. 百分比宽度计算逻辑：CSS中max-width: 百分比的参照值是元素最近的有明确尺寸的父元素宽度，不是图片自身的固有像素宽度。

基于这两个规则，你之前的错误表现可以完全对应：

• 错误1、3中<img>设置了max-width:80%：因为父级<picture>的宽度被<img>自身的640px固有宽度撑开（也就是最近的有明确尺寸的父元素宽度是640px），算出来的80%就是512px，不管外部容器多宽都会强制缩小。
• 错误2中<picture>设置了max-width:80%但内部<img>没有尺寸约束：因为<picture>是行内元素，行内元素的max-width默认不生效，容器宽度还是被<img>的640px撑开，既不能限制最大宽度，也不会在窗口收窄的时候触发缩放。

你可以直接用下面的代码，完全实现和最初无异常的<img>标签一致的表现，同时兼容新旧浏览器：

<style>
  /* 仅支持现代CSS特性、同时支持<picture>的浏览器会执行这段规则 */
  @supports (object-fit: cover) {
    picture img {
      max-width: 100% !important;
      height: auto;
    }
  }
</style>

<!-- 结构部分 -->
<picture style="max-width: 80%;">
  <source srcset="test.webp" type="image/webp">
  <source srcset="test.jpg" type="image/jpeg">
  <!-- img的内联样式是给旧浏览器兜底用的 -->
  <img src="test.jpg" style="max-width: 80%; height: auto;">
</picture>

方案效果验证 #

1. 现代浏览器（支持<picture>标签）：
   所有支持<picture>的浏览器都完全识别@supports规则，块内的CSS会正常生效，用!important覆盖img内联的max-width:80%，将img的最大宽度设为父级<picture>的100%。此时<picture>作为行内元素，自身的max-width:80%会因为内部img的宽度约束生效：
   • 当外部容器宽度足够时，<picture>和img的宽度被img的固有640px尺寸撑开，显示原始640x480的尺寸
   • 当浏览器/容器宽度收窄，80%的可用宽度小于640px时，<picture>的宽度被限制为可用宽度的80%，img跟随父容器等比缩放
2. 旧浏览器（不支持<picture>标签）：
   这类浏览器本身就不支持@supports规则，会直接忽略块内的所有CSS；同时会把<picture>、<source>标签当成无意义的未知元素处理。此时页面上相当于直接渲染了一个带style="max-width:80%; height:auto;"的普通img，和你最初写的无异常代码表现完全一致，不会出现img被强制撑满容器的问题。

补充优化 #

如果需要适配多倍屏场景，只要在<source>标签的srcset里加上不同分辨率的图片地址即可，不会影响现有的尺寸计算逻辑。如果测试中发现部分老版本IE对行内元素的宽度计算有异常，可以额外给<picture>标签加display: inline-block;的样式，不会破坏整体效果。

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