Firefox浏览器中picture标签宽度异常问题求助

问题复现 #

在最新版Firefox中，picture标签出现宽度随机异常，而Chrome中picture宽度与内部img保持一致。由于内容块需要可变高度，无法设置固定宽度。

相关代码如下：

CSS #

.image-h-full picture{height:100%}
.image-h-full picture img{height:100%;width:auto;}
.image-x-center picture{display:flex;justify-content:center}

.border-1{border: 1px solid gray}
.border-black{border-color:black}
.rounded-20{border-radius:20px} 
.flex{display:flex}
.sh-60{height:60px}
.sw-60{width:60px}
.sw-500{width:500px}
.p-48{padding:48px}
.sw-full{width:100%}
.absolute{position:absolute}
.relative{position:relative}
.right-0{right:0}
.top-0{top:0}
.bottom-0{bottom:0}
.bg-black{background:#000}
.bg-blue{background:blue}

HTML #

<div class="relative border-1 border-black rounded-20 p-48 sw-500">
<div class="sh-60 sw-60 bg-black">
</div>
<div class="absolute right-0 top-0 bottom-0 image-h-full image-x-center">
    <picture class="bg-blue">
      <img src="https://assets-global.website-files.com/64328ad759d957f990749456/661526e36b36425ec139b797_blog-banner-1%402x.png" alt="">
    </picture>
</div>
</div>

问题原因 #

Firefox与Chrome对picture元素的默认布局计算逻辑存在差异：当picture设为flex且仅通过子元素img的height:100%控制尺寸时，Firefox无法正确推断picture宽度应与img匹配，导致宽度被错误拉伸或出现随机值。

解决方案 #

以下几种方法无需设置固定宽度即可解决问题：

• 方法1：给picture添加width: fit-content
  修改.image-h-full picture的样式，让其宽度自适应内部内容：

  .image-h-full picture{
    height:100%;
    width: fit-content;
  }
  

  fit-content会让picture宽度刚好包裹内部img，同时保留高度100%的设置，适配可变高度场景。

• 方法2：将picture的display改为inline-flex
  修改.image-x-center picture的样式：

  .image-x-center picture{
    display: inline-flex;
    justify-content:center;
  }
  

  inline-flex让picture宽度由子元素决定，同时保留flex的居中能力，避免Firefox错误拉伸宽度。

• 方法3：让picture继承img的宽度限制
  添加以下样式约束picture宽度：

  .image-h-full picture{
    height:100%;
    max-width: max-content;
    width: auto;
  }
  

  max-content确保picture不会超过img宽度，width:auto让其自适应内容。

验证 #

以上方法在Firefox和Chrome中均能保持picture与img宽度一致，同时支持可变高度需求。

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