HTML表中的自動縮放圖像

我正在爲電子郵件生成html字符串。我有東西，看起來像：HTML表中的自動縮放圖像

<td><img src='whatever.jpg' width='100' style='float:left'/></td>

這樣做的問題是，雖然寬度行之間的平等，有的行是超高層，或者根據原始圖像尺寸超小。我希望能夠將圖像放大到任何可以放入100x100邊框的圖像，同時保持縱橫比。我曾嘗試：

<td><img src='whatever.jpg' width='100' height='100' style='float:left'/></td>

但是，破壞原始的寬高比。我也嘗試設置td元素的高度，但這似乎沒有效果。

生成html時加載和檢查圖像大小並不是真的可行，因爲我不控制圖像，它們可能會改變。

來源

2011-03-28 captncraig

好吧，所以你有你的要求支持你到這裏的角落。

真的不能使用外部服務來調整圖像作爲可以消除圖像做追蹤點擊的可能性，除非你要去自行構建特徵的步驟（樂趣與，單獨運行我公司的點擊跟蹤代碼是痛苦的，它不調整任何東西）
電子郵件不做JavaScript，因此拋出所有這些想法
觀07等可以」 t支持幾種常見的命令，例如 as float（去圖）請參閱compatibility issues with Email programs

答案顯然是ImageMagic或GD其調整爲你組裝發件人的HTML，但你在你的答案，你在圖像的控制不是說和它的加載時不可行HTML。聽起來像你沒有選擇，或必須回到外部服務解決方案，如這裏：http://resize.to/另一方面，它只是在resize.to網站上投擲一個URL，以使事情發生，它會折騰你一個有效的調整大小的圖像。不太可怕。

來源

2011-03-28 21:32:26 bpeterson76

我認爲你是對的。 Resize.to很容易使用。這並不理想，但它會產生理想的結果。謝謝。 – captncraig 2011-03-29 14:53:36

你不能用直接的HTML/CSS來做到這一點。你有兩個選擇：

把圖像中的100×100格，設置寬度或高度和剪輯股利：

<div style="width:100px;height:100px;overflow:hidden;"><img ...></div>

或者使用JavaScript來發現所有的圖像，並重新縮放它們編程，是這樣的：

$('table img').each(function(){ 
    var self = this; 

    if(this.width){ 
     scale(this); 
    }else{ 
     $(this).bind('load', function(){ scale(self); }); 
    } 
}); 

function scale(obj){ 
    obj[obj.width > obj.height ? 'width' : 'height'] = '100px'; 
}

來源

2011-03-28 19:53:31

我想要做的JavaScript選項，但因爲這是用於電子郵件，我不能可靠地指望客戶端正確運行腳本。 – captncraig 2011-03-28 20:05:20

通常，當我碰到這方面的需要，我將創建一個Web服務來調整圖像，即

<img src='/imageResizer.ashx?src=whatever.jpg&width=100&height=100'/>

如果你不能或不想創建自己的調整大小，它看起來像他們是一些公開提供的服務來做調整大小，即（http://www.lightspun.com/）。

使用外部服務的缺點是您在您的網站中創建了額外的依賴關係。

也可能有一種簡單的方法可以用jQuery來做到這一點（請參閱獲取圖像當前高度/寬度的示例：Get the real width and height of an image with JavaScript? (in Safari/Chrome)）。一旦你有了當前的高度/寬度，你就可以使用jQuery設置哪一個更大到100px。

來源

2011-03-28 20:06:17

HTML表中的自動縮放圖像

回答

相關問題