浏览器调整大小后获取图像尺寸
我有一个 div,其中有一个图像我想在里面居中。图像每次都会不同,并且具有 max-width 和 max-height css 属性。问题是,我用来对 image.width 和 image.height 进行数学运算的 image.onload 函数为我提供了浏览器缩小之前的图像尺寸。 :( 我怎样才能做到这一点?
I have a div with a image I want to center inside. The image will be different everytime and has a max-width and max-height css property. Problem is, the image.onload function I use to do the math with the image.width and image.height, gives me the images dimensions before its scaled down by the browser. :( how can I pull this off?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您的意思是您有一个图像,例如 200x200 像素,并且由于 CSS 属性而被调整为(例如)150x150 像素,那么 image.width 和 image.height 应该可以正常工作。也就是说,他们应该为您提供 150x150,而不是 200x200。 (有关 mozilla 参考,请参阅此处。)
或者,您可以尝试 element.clientWidth 和 element .clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight),它给出任何 DOM 元素的渲染大小。
我还没有在 IE 中测试过这个,但它应该也能正常工作。 (宽度的 MSDN 参考页位于此处。您还可以在那里找到 clientWidth。)
您在什么浏览器上进行测试?
If you mean that you have an image that is, say, 200x200 pixels, and has been resized to (say) 150x150 pixels because of the CSS properties, then image.width and image.height should work fine. That is, they should give you 150x150, and not 200x200. (See here for the mozilla reference.)
Alternately, you could try element.clientWidth and element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight), which give the rendered sizes of any DOM element.
I haven't tested this in IE, but it should work fine there as well. (The MSDN reference page for width is here. You can also find clientWidth there.)
What browser are you testing on?