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

【问题标题】：Getting image dimensions after browser resize浏览器调整大小后获取图像尺寸
【发布时间】：2023-03-27 18:40:01
【问题描述】：

我有一个 div，其中包含我想要居中的图像。图像每次都会不同，并且具有 max-width 和 max-height css 属性。问题是，我用来对 image.width 和 image.height 进行数学运算的 image.onload 函数在浏览器缩小图像之前为我提供了图像尺寸。 :( 我怎么能把它搞定？

【问题讨论】：

可以不用cssbackground-position: center;规则吗？
Determine original size of image cross browser? 的可能重复项
两个 cmets 都帮助了 :) 谢谢

标签： javascript image events resize onload

【解决方案1】：

如果您的意思是您有一个图像，例如 200x200 像素，并且由于 CSS 属性而被调整为（例如）150x150 像素，那么 image.width 和 image.height 应该可以正常工作。也就是说，他们应该给你 150x150，而不是 200x200。（有关 Mozilla 参考，请参阅 here。）

或者，您可以尝试 element.clientWidth 和 element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight)，它们给出了任何 DOM 元素的渲染大小。

我还没有在 IE 中测试过，但它应该也可以正常工作。（宽度的 MSDN 参考页是here。您也可以在那里找到 clientWidth。）

你在什么浏览器上测试？

【讨论】：