Divの制限に合わせてイメージのサイズを変更する

Question

ここでは、Freewallを使用して簡単なグリッドギャラリーを作成しました。ここにはhttp://vnjs.net/www/project/freewall/があります。

ギャラリーが正常に動作しているが、私はトラブルのdivにリサイズする画像を得ることを抱えている、私は別の& &もIMG応答しようとした作りしていないようでした、オブジェクトフィットを使用してみました。どちらもうまくいきませんでした。あなたは、私はjQueryのまたはJavaScriptが、画像を使用する必要があれば、私は気にしない問題 を見ることができるので、私は

<div class="row"> 
     <div class="col-md-12"> 
      <div id="freewall" class="free-wall"></div> 
     </div> 
    </div> 
    <script type="text/javascript"> 

     var temp = "<div class='cell img-responsive' style='width:{width}px; height: {height}px; background-image: url(img/gallery/test/{index}.jpg);'></div>"; 
     var w = 400, h = 400, html = '', limitItem = 49; 
     for (var i = 0; i < limitItem; ++i) { 
      html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1); 
     } 
     $("#freewall").html(html); 

     var wall = new Freewall("#freewall"); 
     wall.reset({ 
      selector: '.cell', 
      animate: true, 
      cellW: 400, 
      cellH: 400, 
      onResize: function() { 
       wall.refresh(); 
      } 
     }); 
     wall.fitWidth(); 
     // for scroll bar appear; 
     $(window).trigger("resize"); 
    </script> 

CSS

.free-wall { 
    margin: 15px; 
    object-fit: scale-down; 
} 

以下のコードとスクリーンショットを追加しました誰もが喜ばれる画像に適用できる堅牢なソリューションを提供できれば、スケーリングは私にとってはしばらく問題でした。あなたのスタイルで

Answer 1

background-size: cover;を追加し、それは常に

var temp = "<div class='cell img-responsive' style='width:{width}px; height: {height}px; background-image: url(img/gallery/test/{index}.jpg);background-size: cover;'></div>"; 

以下のようにdiv要素の幅&高さにサイズを変更したいです