图像在 IE 中显示为拉伸答案

【问题标题】：Images appear stretched in IE图像在 IE 中显示为拉伸
【发布时间】：2020-01-30 18:33:17
【问题描述】：

基本上，我使用 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 中显得拉伸（特别是垂直）？

谢谢，汤姆

【问题讨论】：

标签： jquery css

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

您是否在图像标签中同时指定高度和宽度？

【讨论】：