1

そのため、ページに画像の「サムネイル」があります。画像は 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 の小さなコンテナの中央に配置したいと思います。私のやり方はとても... 粗雑に感じます。

考え？

4

1 に答える 1

0

たぶん、javascript DOM を使用してみることができます:

クラスを設定

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

クラスを追加

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

クラスを削除

document.getElementById("img").className = "";
于 2013-08-29T03:32:20.893 に答える