I'm having trouble adding a series of images to rows in my Bootstrap 4 project. The source assets are large by default and I'm struggling with scaling them properly without affecting other columns. Here's a visual representation of what I currently have and what I aim to achieve:
https://i.sstatic.net/uFNB6.png
I'm attempting to loop through my object attributes and insert an image tag in a td element whenever a certain attribute matches a specific string. Below is a snippet of my code and how it currently reflects on the page:
#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>
Below is a snippet from my CSS file that styles the images:
#CSS
.imgrow {
display:block; width:100%; height:auto;
border: 1px solid red;
}
https://i.sstatic.net/TJB32.png
When implementing this code, the images scale down but not consistently as seen by the border colors. I'm looking for guidance on how to improve the scaling and achieve my desired layout. Any advice on what I may be doing wrong would be greatly appreciated.