動態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中檢索元素高度和寬度 –

回答

相關問題