Firefox 图片元素父宽度太大

Posted 2023-03-06

【中文标题】Firefox 图片元素父宽度太大

【英文标题】：Firefox Picture Element Parent Width Too Large

【发布时间】：2016-09-21 17:41:19

【问题描述】：

响应式图片元素的父元素在 Firefox (OS-X) 中的宽度不正确。

这个错误有什么解决方法吗？

.picture-wrapper 
  float: left;


.next-element 
  float: left;

<div class="picture-wrapper">
<picture>
   <source media="(min-width: 1000px)"
      srcset="
        //placehold.it/1200x600 1200w"
      sizes="800px" />
   <img class="image mix-image_buffer"   
      sizes="
        (min-width: 400px) 100vw,
        calc(100vw - 50px)"
      srcset="
        //placehold.it/200x200 200w,
        //placehold.it/250x250 250w,
        //placehold.it/300x300 300w,
        //placehold.it/480x480 480w,
        //placehold.it/600x600 600w,
        //placehold.it/960x960 960w"
     src="//placehold.it/200x200" />
</picture>
</div>
<div class="next-element">Caption</div>

Codepen：http://codepen.io/anon/pen/GZVeYw

结果：

火狐

图片元素和下一个元素之间的空白

Chrome/IE

按预期工作（无空格）

【问题讨论】：

img width:100% 解决了吗？ codepen.io/gc-nomade/pen/VaoNaV

img display: block; 有帮助吗？

@GCyrillus：看起来max-width:75%; 正在做一些繁重的工作。

@ItoPizarro 删除它并看到标题下降:) 有时

@GCyrillus img width:100% 将其放大并用大图像填充空白区域

【参考方案1】：

bug 实际上适用于任何祖先，而不仅仅是 <picture>。

如果知道宽度，可以通过css设置宽度来解决这个bug。

<img class="image mix-image_buffer"   
  sizes="
    (min-width: 400px) 100vw,
    calc(100vw - 50px)"
  srcset="
    //placehold.it/200x200 200w,
    //placehold.it/250x250 250w,
    //placehold.it/300x300 300w,
    //placehold.it/480x480 480w,
    //placehold.it/600x600 600w,
    //placehold.it/960x960 960w"
  src="//placehold.it/200x200"
  style="width: 600px" />