将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图像插入不会扭曲行的列？

回答

相关问题