ブートストラップでウィンドウサイズが変わっても、さまざまなイメージ（イメージグリッド）の幅と高さが修正されます

Question

ブートストラップでさまざまなサイズのイメージからなるグリッドイメージパネルを作成しようとしています。

私がしたいのは、さまざまなウィンドウサイズに適切に反応する完全にまっすぐなイメージグリッドパネルを作ることです。 （モバイル、またはちょうどChromeブラウザの状況を縮小する）。

「col-md-」シリーズを使用して、画像の幅を美しく設定するアプローチでした。各画像の高さを適切に設定する方法（具体的には画像の高さと幅の比率を固定する方法）がわからないので、100ピクセルに設定します。確かに、これは完璧な解決策ではない。なぜなら、収縮すると（例えば、Chromeブラウザ）、高さは固定されているが、幅は変わるからである。私の目標はそれに応じて画像の高さを変えることです。

<% Course.where(:program => 0).each do |course|%> 
    <div class="col-md-3 col-sm-3 col-xs-4 item image-container" style="padding:0 0 0 0; background-color: black; border:2px solid white;" > 
    <img class="img-responsive course-image-wow" src="<%= course.thumbnail.url(:original)%>" alt="" data-courseid="<%=course.id%>" style="box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 2px 3px 0px rgba(0, 0, 0, 0.5); display:block; width:auto; height:100px;" 
    > 
    <div style="text-align:center;" class="homeImageLink vt_font"> 
     <span style="color:white; font-weight:800;"><%=course.title%></span> 
    </div> 
    </div> 
<% end %> 

（上記のスニペットはRubyコードである！）

添付された画像は、現在の出力です。可能であれば、左端からではなく中央から画像を塗りたいと思う。 （これは2番目の質問だと思いますが、ちょうど！）

誰の意見も楽しみにしています！

これは私が作成したばかだ！ https://jsfiddle.net/og4zz9h1/

ベスト

Answer 1

例えばIMGブロック

を揃えるには多くの方法があります： HTML：

<ul> 
    <li><img src=""></li> 
    <li><img src=""></li> 
    <li><img src=""></li> 
</ul> 

CSS：

ul { 
    list-style: none; 
} 

li { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 60px; 
    line-height: 58px; 
    text-align: center; 
    background: #ccc; 
    margin-left: 10px; 
    margin-top: 10px; 
} 

img { 
    width: auto; 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 

https://jsfiddle.net/1ebp1vbf/1/