將0-5圖像插入不會扭曲行的列？

我需要將一系列圖像添加到行中，但我在縮放時遇到了困難（源資源默認情況下很大）並且不會推出其他列。我使用引導程序4並試圖使其工作，但它不會發生在我身上。將0-5圖像插入不會扭曲行的列？

這是我開始看起來明智，我想要實現的。

我想只是通過我的對象迭代，跨越到一個單一的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; 
}

它排序按比例縮小（圖像默認大得多），如果你看一下邊框顏色表明，並非所有圖片以同樣的方式縮放。

我在做什麼錯，我該如何去實現我的目標？

來源

2017-02-26 Antonio

我想問問你，如果你有一個更新。謝謝Fabrizio –

謝謝你提醒我。我在帖子中添加了自己的答案，您可以查看。 – Antonio

我能夠得到足夠接近我想要的東西。

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

來源

2017-03-15 17:25:36 Antonio

也許不同的圖像只是根據容器的寬度進行縮放？他們是容器的100% width，如果玻璃是一種圖像100px height和100px width，那麼span會100px width，如果美元是100px height和140px width那麼conteiner跨度將是140px 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

來源

2017-02-28 15:24:00

將0-5圖像插入不會扭曲行的列？

回答

相關問題