随着智能手机等小屏移动设备的兴起, 以前只针对桌面电脑的网站必不可少的向自适应网站页面模式迁移, 而在这其中, max-width 这个新的 CSS 属性在自适应设计中占有举足轻重的作用. 我通常都是将 img, iframe, 和 embed 等标签设置成 max-width: 100%, 这样, 它们的尺寸就会跟随它们的父元素一样扩展和收缩, 就能自适应各种平面尺寸 / 分辨率的移动设备了.
但最近我发现了一个问题, 就是当采取自适应技术后, 图片在页面上表现的尺寸大小往往不是它们的真实大小, 那么, 如果我想获取页面上一个图片的真实长度宽度, 该怎么办呢? 最近偶然在 MDN 上发现了一个从未听说的新属性, 正好能帮我解决这个问题!
JavaScript 代码
使用 JavaScript, 我们能获取一个图片的真实宽度和高度:
- myImage.addEventListener('onload', function() {
- console.log('我的宽度是:', this.naturalWidth);
- console.log('我的高度是:', this.naturalHeight);
- });
我还是第一次看见 naturalWidth 和 naturalHeight 这两个只读属性, 真是两个非常有用的属性. 不论你如何用 CSS 来变换一个 img 元素的高度和宽度, 图片的原始大小都能用它们获取到. 需要提醒的一点是, 你不需要等待图片成功加载到页面后, 才能正确的访问这两个属性, 所以我它们放到了 onload 事件里.
来源: http://www.webhek.com/post/get-real-image-height-and-width-dimensions.html