高さと幅のためにブートストラップcolsを1：1の比率に設定してください

Question

私は、表示されている背景全体をスペーシングなしでカバーしているレコードカバーの写真を持つページでRailsアプリケーションを作成しています。私はユーザーが自分の画像をアップロードできるようにしており、正確に1：1の比率で表示されたときにそれらの画像がリサイズされるようにしたい。そうでない場合は、タイルパターンが崩れてギャップを残します。そうするために、私は画像が内部にあるブートストラップのサイズを決めたいと思います。私はJQueryでこれをやろうとしており、ほとんど成功していません。 JQueryでこれを行うことはできますか？別の方法がありますか？これは私が持っているものです。ここで

は私のページである：ここでは

<div class="row"> 
    <% @albums.each do |album| %> 
    <a href="/albums/<%= album.id %>"> 
    <div class="col-lg-3 col-sm-4 col-xs-6 index_container embed-responsive-1by1"> 
     <% if album.cover.blank? %> 
     <p><%= album.title %></p> 
     <p><%= album.artist %></p> 
     <p><%= album.year %></p> 
     <%= link_to "Show", album_path(album), class: 'grey' %> 
     <%= link_to "Edit", edit_album_path(album), class: 'grey' %> 
     <%= link_to "Destroy", album_path(album), method: :delete, data: {confirm: "Are you sure?"}, class: 'grey' %> 
     <% else %> 
     <%= image_tag album.cover, class: 'index_image' %> 
     <% end %> 
    </div> 
    </a> 
    <% end %> 
</tbody> 
</table> 
<br> 
</div> 
<style> 

は（間違っている）私のjQueryのです：

<style> 
    var cw = $('.index_container').width(); 
    $('.index_container').css({'height', cw+'px'}); 
</style> 

Answer 1

あなたのCSSを見ることなく、ここに私はあなたがしなければならないと想像ものです：

.index_container { 
width: 50px; /*or any width you like, but it must be defined*/ 
height: 50px; /*or any height you like */ 
background-size: cover /*very important as it covers the element within the defined widthxheight*/; 
background-repeat: no-repeat; 
background-position: 50% 50%; 
} 

そしてvoila - JQueryは必要ありません。