Ruby on rails 如何设置图片库的样式以允许同时包含链接的纵向和横向图片

我想知道如何设置图片库的布局。图库包含链接到各个图片的缩略图。图像可以是纵向的，也可以是横向的。我正在努力找出如何设置缩略图库以适应这两种可能的布局

我一直在寻找并找到了两种方法，每种方法都能让我得到我想要的一半。现在的问题是：我如何得到我想要的一切

因此，这对于获取链接是有效的

标记：

<% @pics.each do |pic| %>
  <div class="thumbnail">
     <%= link_to (image_tag pic.url), pics_path(pic: single_image(pic)) %> 
  </div>
<% end %>

这适用于显示横向和纵向图像

在标记中：

<div style="width:200px; 
            height:200px;
             background: url(<%= single_image(pic) %>) no-repeat center;">

---

（我很想把这个样式从标记中去掉。放在那里感觉很脏，但我可以动态生成内容）

您可以轻松地将宽度和高度放入css文件中。要做到这一点，您需要向图像添加一个id或类，这样图像就会像这样：

<%= link_to (image_tag pic.url), pics_path(pic: single_image(pic)), class: "class-name" %>

或者，如果您的div是缩略图div，您的css将如下所示：

.thumbnail {
   margin: 30px;
   width: 200px;
   height: 200px;
}

<% @pics.each do |pic| %>
  <div class="thumbnail">
     <%= link_to pic do %>
        <%= image_tag pics_path(pic: single_image(pic), :class => 'img-styling') %> 
     <% end %>
  </div>
<% end %>

问题来自背景图像。不能将动态代码（如

）放入样式表中。你可能想看看这篇文章：

<>或者你可以考虑不让它成为背景图像。而是将标记（使用与上述相同的css）更改为如下所示：

.thumbnail {
   margin: 30px;
   width: 200px;
   height: 200px;
}

<% @pics.each do |pic| %>
  <div class="thumbnail">
     <%= link_to pic do %>
        <%= image_tag pics_path(pic: single_image(pic), :class => 'img-styling') %> 
     <% end %>
  </div>
<% end %>

---

这对你有帮助吗

您在哪个部门添加了样式？这不是缩略图，对吧？它围绕着每个图像吗？我最近也做过类似的事情，如果你能告诉我你的div在哪里，我想我能帮上忙。是的，我需要它来包围每张图片。现在是缩略图div，但我准备根据需要进行更改。我更新了答案，向您展示了几个选项，以及如何使用缩略图div设置宽度和高度的样式。感谢您在这方面的帮助。这种方法对我来说是新的，我非常喜欢：``。谢谢分享！我很高兴这是有益的！我能问一下你的缩略图是怎么做的吗？我最终在image_标签中设置了大小，但它会扭曲风景图片。我还没有找到一个好的解决方案来同时显示风景图片和肖像图片。我很乐意提供帮助。你是如何把你的图像拉进去的？你用的是像回形针或卡里瓦夫这样的宝石吗？或者其他方式？我不熟悉这块宝石。当你把它们拉到你的应用程序中时，有没有一种方法可以将它限制在一定的大小而不扭曲它？我看了一下文档，看看是否能看到任何东西，但它非常稀疏。这通常是最简单的方法。下面是使用html/css的另一个很棒的解决方案：

.img-styling {
   your styling here
}