1

我有这样的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指定）具有双倍宽度。我无法在任何其他浏览器上复制它。

截屏：

截屏

在这支笔中重新创建。

4

1 回答 1

0

我可以确认错误。

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

  $('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 插件，因为 img 元素的大小直到加载后才知道。

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

于 2016-11-29T17:59:28.663 回答