javascript - 获取调整大小后的图像的 clientWidth 和 clientHeight

Question

我正在根据当前视口(viewport)大小在 JavaScript 中调整图像大小。没有媒体查询和其他类似的东西，全程使用 JS，也没有元素的静态大小。

所以基本上它看起来像这样:

    var computedHeight = viewport.height * someRatio;
    var image = goog.dom.createDom('img', {
        'src': 'the.link.to.the.image',
        'height': computedHeight + 'px',
        'width': 'auto'
    };

Answer 1

正如其他人所说，在图像插入文档之前，您无法获取尺寸。

但是你可以自己计算尺寸。

图像加载完成后，您可以访问图像的原始尺寸。基于此，计算缩放后的尺寸并不困难:

    var image = goog.dom.createDom('img', {
    'src': 'the.link.to.the.image',
    'height': computedHeight + 'px',
    'width': 'auto',
    'onload':function(){
      alert('width:'+
            Math.floor((this.naturalWidth*this.height)/this.naturalHeight)+
            '\nheight:'+this.height);        
    }
});