Images appear stretched in IE

Question

Basically, I use jQuery to get images from Flickr like so:

$(document).ready(function(){
$.getJSON("URL-GOES-HERE", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).addClass("thumb").appendTo(".flickr")
      .wrap("<a href='" + item.link + "'></a>").wrap("<div class='flickr-thumb' />");
  });
});
});

and I wrap the images in a div: <div class="flickr"></div>

Here is my CSS:

.flickr       { overflow: hidden; } 

.flickr-thumb { height: 40px; overflow: hidden; float: left; } 

.thumb        { width: 60px;}

So the javascript adds all this on the fly and it just shows up as <div class="flickr"></div> when you view the source. Hopefully it's pretty intuitive.

But can anyone explain why images appear stretched (specifically, vertically) in IE?

Thanks, tom

Answer 1

Are you specifying both height and width in your image tags?

Answer 2

My guess would be that the image's original resolution was not 60px wide. When you set the width using css (or html width attribute), it does not resize the image both vertically and horizontally. It only resizes it in in the direction you've specified.

Thus, an image with a width of 100px and a height of 100px will appear as 60x100 in your thumb class, which could give the illusion of vertical stretching.

You need to either write code which evaluates the resolution (width and height) and resizes both directions appropriately, or, if all your images are a fixed size, specify both width and height.

.thumb { width:60px; height:60px; }

It's also worth mentioning that resizing images with css or html is not recommended since some browsers will alias the result (notably ie6).

Answer 3

Thanks Joel, much appreciated. I'll just set the height and width in my thumb class as you suggested.