jquery - 遅延ロードとアイソトープのレスポンシブ イメージ

Question

isotope jquery プラグインと組み合わせた lazyload に対して画像をレスポンシブにするにはどうすればよいですか? これまでのところ、次のコードがあります。

<div class="thumbnail item">
    <a href="image.jpg" class="fbgroup" rel="fbgroup">
        <img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="thumb_image.jpg" height="auto" width="auto" style="height:300px; width:450px;" />
        <noscript><img src="image.jpg" height="auto" width="auto" style="width:450px; height:300px" /></noscript>
    </a>
</div>

Lazyload はこのように機能し、アイソトープのメーソンリーも同様に機能しますが、ブラウザーのサイズを画像の幅よりも細いサイズに変更すると、ページのコンテンツ コンテナーからはみ出し、反応して縮小しません。難しいのは、lazyload が img タグのスタイル セクションで画像の実際の幅と高さを必要とするように見えることです。