Question

我已经设置了一个页面，您可以在其中以/作为集合查看我的用户列表，调用他们上传的前3个图像以显示并限制调用的图像数量为3.我现在正在寻找能够拍摄这3张图片中的第一张图片，并将其尺寸设置得比其他2幅图片大得多，我希望将其保留为下方的缩略图。就像Etsy的Trending Items主页一样。

在#at-at-time中通过以下方式调用图像时，能够自定义图像大小的最佳解决方案是什么：

<% user.pictures.limit(3).each do |picture| %>
   <%= image_tag picture.image.url(:thumb) %>
<% end %>

Answer 1

如果我读得正确，问题可以简化为给出一个项目列表，如何对第一个项目做一些特殊的事情而不是其他项目。 each_with_index是其中一种方式。

<% user.pictures.limit(3).each_with_index do |picture, i| %>
   <% if i == 0 %>
     # Make it the big one
     <%= image_tag picture.image.url %>
   <% else %>
     # Make it smaller
     <%= image_tag picture.image.url(:thumb) %>
<% end %>

在其上方，假设image.url没有:thumb的插图会返回更大的图片。如果您需要更精确地控制图像的位置和大小，我建议渲染第一个图像，其他图像使用不同的HTML元素/类，以便您可以对它们应用不同的CSS。

在说明限制（＃）时单独调整图像大小

1 个答案: