【发布时间】：2013-09-01 08:20:18
【问题描述】：
所以，我在页面上有图像的“缩略图”。图像通过 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 容器中。我的方式感觉很……粗鲁。
想法？
【问题讨论】：
-
图片的文件大小是多少？
-
取决于... 200k 到 3mb？
-
忽略我的其他 cmets，没有正确阅读您的代码。在上述情况下，我会将图像文件大小与模型一起存储，然后使用：
photo.filesize。谈到页面上图像的数量/大小，请务必在上传/处理时创建适当版本的文件。使用 CSS 缩小 3mb 图像的尺寸是浪费 - 这不会减少传输大小。 -
达米安说的，即使你用css调整大小，图像仍然是3mb。至于在其容器中居中图像。以下样式有效
{margin-left: auto; margin-right: auto; display: block; } -
所以，我没有创建缩略图版本。归根结底，我必须这样做。这仍然留下了定位图像的问题。当我谈论尺寸时，我指的是尺寸。我要向左移动的宽图像。一个高大的图像，我要向上移动。
标签： ruby-on-rails ruby-on-rails-3 css