Firefox 图片元素父宽度太大答案

【问题标题】：Firefox Picture Element Parent Width Too LargeFirefox 图片元素父宽度太大
【发布时间】：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%} 将其放大并用大图像填充空白区域

标签： html css firefox

【解决方案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" />

【讨论】：