Autoscale image in HTML table

Question

I am generating an html string for an email. I have something that looks like:

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

The problem with this is that while the widths are equal between rows, some rows are super tall or super small depending on the original image size. I would like to have it scale the image to whatever can fit in a 100x100 bounding box, while preserving the aspect ratio. I have tried:

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

but that destroys the original aspect ratio. I have also tried setting the height of the td element, but that seems to have no effect.

It is not really feasible to load and check the image size when generating the html, as I am not in control of the images and they may change.

score 1 · Answer 1 · answered Mar 28 '11 at 19:53

You can't do this with straight HTML/CSS. You have a couple of options:

Put the image in a 100x100 div, set either width OR height and clip the div:

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

Or use JavaScript to find all the images and re-scale them programmatically, something like:

$('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';
}

I would like to do the javascript option, but as this is intended for an email, I can't reliably count on the client to run the script properly. — captncraig, Mar 28 '11 at 20:05

score 1 · Answer 2 · edited May 23 '17 at 10:33

Typically when I've ran into this need, I'll create a webservice to resize the images, i.e.

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

If you can't or don't want to create your own resizer it looks like their are some publically available services to do the resizing i.e. (http://www.lightspun.com/).

The downside to using an external service is that you create a extra dependency in your website.

There is probably an easy way to do this with jQuery as well (see this for an example of getting the current hieght/width of an image: Get the real width and height of an image with JavaScript? (in Safari/Chrome)). Once you have the current height/width you can then set which over one is bigger to 100px using jQuery.

score 1 · Accepted Answer · answered Mar 28 '11 at 21:32

Ok, so you've got your requirements backing you into a corner here.

Can't really use an external service to resize images as that could eliminate the possibility of doing image click tracking, unless you're going to go to the step of building the feature yourself (have fun with that, the code that runs my company's click tracker alone was painful, and it doesn't resize anything)
Emails don't do Javascript, so throw out all those ideas
Outlook 07 and others can't support several common commands such as float (go figure) See this for compatibility issues with Email programs

The obvious answer is ImageMagic or GD to resize as you're assembling the html for the sender, but you said in your answer that you're not in control of the images and it's not feasible when loading HTML. Sounds to me like you're either out of options or have to go back to the external service solution such as here: http://resize.to/ On the plus side, it's just a matter of throwing a URL at the resize.to website to make things happen, and it'll toss you back a valid resized image. Not too terrible.

I think you're right. Resize.to is easy enough to use. It's not ideal, but it gives the desired result. Thank you. — captncraig, Mar 29 '11 at 14:53

Autoscale image in HTML table

3 Answers3