0

几天前，我想知道为什么当我在我的网站上将图像的宽度和长度属性设置为百分比时，它并没有按照我认为的方式缩小图像。

问题是我希望它缩小图像，但它实际上是缩小图像的容器。

无论如何，我实际上很喜欢 Pat 的建议，即使用 jQuery 的片段来调整图像的大小，因为我可以轻松地将它应用到我的所有具有fancybox 类的图像，换句话说，我的产品图像，点击后，显示fancybox效果。

但是，由于某种原因，它的行为有点古怪。

如果您指向浏览器以便在我的页面上查看问题，在http://www.marioplanet.com/product.htm您可能会看到问题。

如果您以前访问过我的网站以帮助我进行调试，我很感激，请确保您删除我网站的 cookie，并清空缓存，因为它似乎只在第一次访问时出现问题。

对于不同的浏览器，问题似乎有所不同：

Firefox (3.6.8) 和 IE (8)：在粗体文字下方：“Category Plush”图片应适当调整大小，它们太小了。

Chrome (5.0.375.125) 和 Safari (5)：在图像应该在的相同粗体文本下方，只有两个轮廓方框，没有其他内容。

就不更新代码而言，我发现的“修复”似乎是：

Firefox (3.6.8) 和 IE (8)：一个简单的刷新，图像恢复到我希望它们在第一次访问时的大小。

Chrome (5.0.375.125) 和 Safari (5)：通过将这两个浏览器指向 URL http://www.marioplanet.com/product.htm#，可以通过添加井号 (#) 或单击“Follow Us On”社交网络托盘中的 YouTube 图标，图像将按照我希望它们在第一次访问时的大小进行调整。

所以，我在想，关于 jQuery 代码片段，也许 .width() 操作没有得到广泛的支持，谷歌搜索没有产生任何结果，如果它不能在任何主要浏览器上正常运行是没有意义的。

所以，然后我在想，也许 jQuery 的片段不在 $(document).ready 事件处理程序中，所以 DOM 以及图像都没有被正确加载。在调查我的代码后，一切看起来都很好。

最后，我想知道我的图像上剩余的任何尺寸是否搞砸了 jQuery 调整大小，一切似乎都还好，但也许它与表格和表格行和单元格的宽度有关？

任何关于问题所在的建议或想法将不胜感激！！

谢谢！

4

1 回答 1

1

问题确实是您的$(document).ready处理程序，当它运行时 DOM 已准备好，图像可能不会，也可能不会在第一次加载时出现。它在重新加载时起作用的原因是图像被缓存，因此立即加载。

不过，有一个简单的解决方法，而不是$(document).ready使用window.onload事件，如下所示：

$(window).load(function() {
  //code that needs images
});

主要区别在于加载图像后onload运行，因此会给您正确的值，而不是..width()0

于 2010-08-08T16:00:05.827 回答