html - Firefox:指定 2x srcset 的 Img 在 float 时有奇怪的间距

Question

我有这样的 HTML:

<div id='container'>
  <div class='left mr1'>
    <img src='https://placehold.it/100x50' srcset='https://placehold.it/200x100 2x'>
  </div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

像这样的 CSS:

#container {
  width: 400px;
  background: #eee;
  padding: 10px;
}

.mr1 {
  margin-right: 10px;
}

.left {
  float: left;
}

仅在 Firefox 中，当在“视网膜”显示器上查看时，这会导致 .left div(没有指定 width ) 具有双倍宽度。我无法在任何其他浏览器上复制它。

截图:

重新创建于 this pen .

Answer 1

我可以确认错误。

这是最简单的解决方案。这会将所有图像的最大宽度设置为其 natural width ，事实证明，这是正确的大小。但这意味着任何图像都不能超出您网站上的自然宽度，这可能是您想要的。也就是说，必须谨慎使用以下内容，它将覆盖您网站上图像上的任何最大宽度声明。

  $('html').imagesLoaded(function() {
    $('img').each(function() {
      // Exclude SVG images.
      if (this.src.split('.').pop().toLowerCase() !== 'svg') {
        var imgWidth = this.naturalWidth;
        $(this).css('max-width', imgWidth); // Set max width of element to the natural width of the img specified in the src tag. This means that srcset images cannot swell size the image as in FF.
      }
    });
  });

您将需要 imagesLoaded plugin因为 img 元素的大小在加载之前是未知的。

请注意，我在这里使用的是 jQuery。但这可以使用 vanilla JS 轻松实现。