行を歪ませない列に0〜5のイメージを挿入しますか？

Question

一連のイメージを行に追加する必要がありますが、スケーリングに問題があり（デフォルトではソースアセットが大きい）、他の列を押し出すことはありません。私はブートストラップ4を使用していて、動作させようとしていますが、それは私のために起こっていません。

ここで私は外見上の賢明さと私が達成しようとしているものから始めています。

私はちょうど私のオブジェクトを反復処理し、属性が文字列に一致するたびに、単一tdにまたがり、それが一致するものを見つけたときにimage_tagを挿入しようとしています。ここに私のコードと、このコードが実装されているように見えます。ここで

#erb file 
<tbody id="hits"> 
    <% @objects.each do |obj| %> 
    <tr> 
     <td><%= link_to obj.title, obj_path(obj) %></td> 
     <% if obj.packages.any? %> 
     <% obj.packages.each do |p| %> 
      <td> 
       <span><%= image_tag "img1.jpg", :class => "imgrow" if p.someattribute === "attr1"%></span> 
       <span><%= image_tag "img2jpg", :class => "imgrow" if p.someattribute === "attr2"%></span> 
       <span><%= image_tag "img3jpg", :class => "imgrow" if p.someattribute === "attr3"%></span> 
       <span><%= image_tag "img4jpg", :class => "imgrow" if p.someattribute === "attr4"%></span> 
       <span><%= image_tag "img5jpg", :class => "imgrow" if p.someattribute === "attr5"%></span> 
      </td> 
     <% end %> 
     <% end %> 
     <td><%= obj.capacity %></td> 
     <td><%= obj.started_at.strftime('%A, %B %e, %Y at %l:%M %p') if obj.started_at? %></td> 
    </tr> 
    <% end %> 
    <tr><td colspan="3" align="center"><%= link_to "Load More", objects_path, class: "load-more" %></td></tr> 
</tbody> 

が私のスタイルシートが

#CSS 
.imgrow { 
    display:block; width:100%; height:auto; 
    border: 1px solid red; 
} 

であることは、一種の縮小（画像はデフォルトでははるかに大きい）とあなたが境界線の色を見ればないすべての画像をすることを示しています同じようにスケールします。

私は間違って何をしていますか、目標達成のためにどうすればいいですか？

Answer 1

私は私が欲しかったものに十分に近づくことができました。

.obj-image { 
    display: inline-block; 
    margin: 0; 
    height:15%; 
    width:15%; 
} 

Answer 2

多分、異なる画像はコンテナの幅に基づいてスケーリングされているだけでしょうか？ 彼らはガラスが画像100px height100px widthとあればドルが100px heightと140px widthである場合、そのconteinerスパンは140px widthされるが、その後spanは、100px widthなり、容器の100% widthあります。

多分、これは彼らが違って見える理由ですか？

あなたはこのCSSを適用するので：

.imgrow { 
    display:block; width:100%; height:auto; 
    border: 1px solid red; 
} 

私はcarrierwaveでアップロードを使用して、イメージのバージョンを使用することができます。幅/高さの設定に基づいて画像を正確に拡大するには、imagemagick gemを使用します。

https://github.com/carrierwaveuploader/carrierwave#adding-versions

https://github.com/rmagick/rmagick https://www.gra2.com/article.php/using-rmagick-imagemagick-rails