Question

我正在尝试使用javascript创建一个非常简单的库。有缩略图，当它们被点击时，大图像的源会被更新。一切正常，除非我在IE中尝试，图像的大小与初始图像的大小保持一致。假设初始图像是200x200，我点击100x100图像的缩略图，图像显示但是拉伸到200x200。我没有设置任何宽度或高度值，所以我猜浏览器应该使用图像的正常大小，例如FF。

这里有一些代码：

function showBigImage(link)
{
 var source = link.getAttribute("href");
 var bigImage = document.getElementById("bigImage");
 bigImage.setAttribute("src", source);
 return false; /* prevent normal behaviour of <a> element when clicked */
}

和html看起来像这样：

<ul id="gallery">
 <li>
  <a href="images/gallery/1.jpg">
   <img src="images/gallery/1thumb.jpg">
  </a>
 </li>
    (more <li> elements ...)
</ul>

大图像是动态创建的：

function createBigImage()
{
 var bigImage = document.createElement("img");
 bigImage.setAttribute("id", "bigImage");
 bigImage.setAttribute("src", "images/gallery/1.jpg");

 var gal = document.getElementById("gallery");
 var gal_parent = gal.parentNode;
 gal_parent.insertBefore(bigImage, gal);
}

还有一些代码设置了链接上的onclick事件，但我不认为它与这种情况相关。正如我所说，问题只与IE有关。提前谢谢！

Answer 1

听起来IE正在计算width的{{1}}和height属性，并在#bigImage更改时不再更新它们。其他浏览器可能注意到他们必须自己计算图像尺寸，以便在更改src时重新计算它们。这两种方法都足够合理。

您是否知道src内图片的正确尺寸？如果您这样做，请在更改showBigImage()后明确设置width和height属性：

src

如果您不知道新尺寸，请更改function showBigImage(link) { var source = link.getAttribute("href"); var bigImage = document.getElementById("bigImage"); bigImage.setAttribute("src", source); bigImage.setAttribute("width", the_proper_width); bigImage.setAttribute("height", the_proper_height); return false; }以删除showBigImage()并创建一个新尺寸：

#bigImage

使用不同大小的图像更改图像源将不会在IE中调整大小

1 个答案: