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表中的自动缩放图像

回答

相关问题