将 0-5 个图像插入不会扭曲行的列？

Question

我需要将一系列图像添加到行中，但我在缩放时遇到了困难（默认情况下源资源很大）并且它没有推出其他列。我正在使用 bootstrap 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>

这是我的风格sheet

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

它有点缩小（默认情况下图像要大得多），如果您查看边框颜色，就会发现并非所有图像都以相同的方式缩放。

我哪里做错了，我该如何实现我的目标？

Answer 1

也许不同的图像只是根据容器的宽度缩放？它们是容器的 100% width，如果玻璃是图像 100px height 和 100px width，那么 span 将是 100px width，而如果美元是 100px height 和 140px width 那么容器跨度将是 140px width.

也许这就是他们看起来不同的原因？

因为你应用了这个css:

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

我使用 carrierwave 上传，您可以使用图像版本。它使用 imagemagick gem 根据您的 width/height 设置正确缩放图像。

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

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

Answer 2

我能够接近我想要的东西。

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

将 0-5 个图像插入不会扭曲行的列？

Insert 0-5 images into a column that doesn't distort the row?

css

ruby-on-rails

erb

twitter-bootstrap

twitter-bootstrap-4