jquery - 图像在 IE 中出现拉伸(stretch)

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 中会被拉伸(stretch)(特别是垂直方向)？

谢谢，汤姆

Answer 1

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

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

您需要编写代码来评估分辨率(宽度和高度)并适本地调整两个方向的大小，或者，如果您的所有图像都是固定大小，则同时指定宽度和高度。

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

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