Bilder erscheinen in IE gestreckt

Question

Grundsätzlich ich jQuery verwenden, um Bilder von Flickr zu erhalten wie folgt:

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

und ich die Bilder in einem div wickeln: <div class="flickr"></div>

Hier ist meine CSS:

Also das Javascript fügt all das im laufenden Betrieb und es erscheint nur als <div class="flickr"></div>, wenn Sie die Quelle anzeigen. Hoffentlich ist es ziemlich intuitiv.

Aber kann jemand erklären, warum Bilder gestreckt werden (speziell vertikal) in IE?

Danke, tom

Answer 1

Sie die Höhe und die Breite in der Image-Tags angeben?

Answer 2

Meine Vermutung wäre, dass die ursprüngliche Auflösung des Bildes nicht 60px breit war. Wenn Sie die Breite mit css (oder html width attribute) festlegen, wird das Bild nicht vertikal und horizontal skaliert. Es ändert nur die Größe in der von Ihnen angegebenen Richtung.

So ein Bild mit einer Breite von 100px und einer Höhe von 100px wird als 60x100 in Ihrer thumb Klasse angezeigt, die die Illusion von vertikaler Dehnung geben könnte.

Sie müssen entweder Code schreiben, der die Auflösung (Breite und Höhe) bewertet und die Größe beider Richtungen entsprechend ändert, oder, wenn alle Ihre Bilder eine feste Größe haben, sowohl die Breite als auch die Höhe angeben.

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

Es ist auch erwähnenswert, dass Größe der Bilder mit CSS oder HTML nicht, da einige Browser das Ergebnis empfohlen wird (vor allem IE6) wird Pseudonyms gestattet.