css - 画像が読み込まれる前に、ブラウザが総ページサイズを決定するように取得する srcset 画像を遅延サイズ化します

Question

流動的なレイアウトで srcset と組み合わせて lazysizes プラグインを使用しています。スクロール時にページを拡張するのではなく、ブラウザーにページを正しい長さでロードさせる方法がわかりません。

ここでデモを行うために、ブートストラップ フレームワークを使用して codepen を作成しました。

http://codepen.io/elevenelevne/pen/EKbERV

よく読んだ後、ブラウザが設定されていないため高さを計算できないことが原因であると確信していますが、レスポンシブな方法で動作させることはできません

コードですが、たとえば10行あります

<div class="container-fluid">

  <div class="row-fluid">

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

  </div>

  </div>

</div>

どんな助けでもありがたく受け入れられます