0

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

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

因此，这适用于获取链接。

标记：

<% @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;">

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

4

1 回答 1

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 帖子：在 Rails 应用程序中从数据库中提取 CSS 资产（如背景图像）？.

或者您可以考虑不将其设置为背景图像。而是将标记（使用与上述相同的 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
}

这对你有帮助吗？

于 2013-04-14T02:09:11.997 回答