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 = "";

动态CSS图像

1 个答案: