ruby-on-rails - 图像的动态 CSS

Question

所以，我在页面上有图像的“缩略图”。图像通过 CSS 调整大小，因此“缩略图”上的引号。有时图像很高，有时它们很宽。很明显，对吧？

现在，我正在处理这个，但它很慢。告诉我有更好的方法。

_photo.html.erb（部分调用<%= render '@photos' %>）

<% image_size = FastImage.size(photo.image_url) %>
<% if image_size[0] > image_size[1] %>
  <%= link_to image_tag(photo.image_url, class: 'wide'), photo if photo.image_url %>
<% else %>
  <%= link_to image_tag(photo.image_url, class: 'tall'), photo if photo.image_url %>
<% end %>

在 CSS 中...

img {
  &.tall {
    max-width: 220px;
    min-width: 220px;
    position: relative;
    top: -20%;
    left: -10px;
  }
  &.wide {
    max-height: 220px;
    min-height: 220px;
    position: relative;
    left: -20%;
    top: -10px;
  }
}

我已经说过，它有效。但是，当我调用该页面时，它必须考虑一下，并且只有 3 张照片。显然不是一个好的解决方案。我还想将图像放在它的小 200px 容器中。我的方式感觉很……粗鲁。

想法？

Answer 1

也许您可以尝试使用 javascript DOM ：

设置类

document.getElementById("img").className = "tall";

添加类

document.getElementById("img").className += "wide";

删除类

document.getElementById("img").className = "";