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 でのみ、"retina" ディスプレイで表示すると、.left div(指定されていないwidth) の幅が 2 倍になります。これを他のブラウザで複製することはできません。

スクリーンショット:

スクリーンショット

このペンで再現。

4

1 に答える 1

0

バグを確認できました。

これが最も簡単な解決策です。これにより、すべての画像の最大幅が自然な幅に設定され、これが正しいサイズであることがわかります。ただし、これは、サイト上で画像が本来の幅を超えて拡大できないことを意味します。つまり、この以下は注意して使用する必要があり、サイトの画像の max-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.
      }
    });
  });

img 要素のサイズは読み込まれるまでわからないため、 imagesLoaded プラグインが必要になります。

ここではjQueryを使用していることに注意してください。しかし、これはバニラ JS で簡単に実現できます。

于 2016-11-29T17:59:28.663 に答える