Question

基本上，我使用jQuery从Flickr获取图像，如下所示：

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

我将图像包装在div中： <div class="flickr"></div>

这是我的CSS：

.flickr       { overflow: hidden; } 

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

.thumb        { width: 60px;}

因此，javascript会动态添加所有这些内容，当您查看源代码时，它只会显示为<div class="flickr"></div>。希望它非常直观。

但任何人都可以解释为什么图像在IE中显得拉伸（特别是垂直）？

谢谢，汤姆

Answer 1

我的猜测是图像的原始分辨率不是60px宽。使用css（或html width属性）设置宽度时，它不会垂直和水平调整图像大小。它只会按照您指定的方向调整大小。

因此，宽度为100像素，高度为100像素的图像在thumb类中将显示为60x100，这可能会产生垂直拉伸的错觉。

您需要编写评估分辨率（宽度和高度）的代码并适当调整两个方向的大小，或者，如果所有图像都是固定大小，请指定宽度和高度。

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

还值得一提的是，不建议使用css或html调整图像大小，因为某些浏览器会对结果进行别名（尤其是ie6）。

Answer 2

您是否在图片代码中指定了高度和宽度？

图像在IE中显得拉长

2 个答案: