动态CSS图像

所以，我有一个页面上的图像'缩略图'。图像通过CSS调整大小，因此引用“缩略图”。有时图像很高，有时很宽。很明显，对吗？动态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的小容器中。我的方式只是感觉如此粗暴。

想法？

来源

2013-08-29 Dudo

什么是图像的文件大小？ – ragnika

取决于... 200k到3mb？ – Dudo

忽略我的其他评论，没有正确读取您的代码。在上述情况下，我会将图像文件存储在模型中，然后使用：'photo.filesize'。在说明页面上图像的数量/大小时，请务必在上传/处理中创建适当版本的文件。使用CSS缩小3MB图像的尺寸是一种浪费 - 这不会减小传输大小。 –

也许你可以尝试使用JavaScript DOM：

集类

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

添加类

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

删除类

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

来源

2013-08-29 03:32:20

我将如何获得图像的大小？ – Dudo

您可以通过document.getElementById（“img”），style.width'和document.getElementById（“img”）。style.height'在JavaScript中检索元素高度和宽度 –

回答

相关问题