浏览器调整大小后获取图像尺寸

发布于 2024-11-06 01:28:01 字数 167 浏览 3 评论 0原文

我有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

合约呢 2024-11-13 01:28:01

如果您的意思是您有一个图像,例如 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?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文