如何设置图片库的样式以允许同时作为链接的纵向和横向图片

Question

我正在尝试弄清楚如何设置图片库的布局。图库包含链接到各个图片的缩略图。图像可能是纵向或横向的。我正在努力弄清楚如何设置缩略图库以适应两种可能的布局。

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

所以，这适用于获取链接。

标记：

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

CSS：

.thumbnail {
  margin: 30px;
}

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

在标记中：

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

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

Answer 1

您可以轻松地将宽度和高度放入 css 文件中。为此，您需要为图像添加一个 id 或类，所以它会像这样：

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

css 看起来像这样：

.class-name {
     width: 200px;
     height: 200px;
 }

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

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

问题与背景图片有关。您不能将像<% sing_image(pic) %> 这样的动态代码放入样式表中。你可能想看看这个 SO 帖子：Pulling CSS assets (like background images) from the database in a Rails app?。

或者您可以考虑不将其设为背景图片。而是将标记（使用与上述相同的 css）更改为如下所示：

<% @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 中添加：

.img-styling {
   your styling here
}

这对你有帮助吗？