Question

我正在根据当前视口大小调整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);        
    }
});

Answer 2

显示图像后，尝试查询以下属性

image.offsetWidth
image.offsetHeight

Answer 3

尝试goog.style.getComputedStyle（image，'width'）。可能你需要先将它添加到文档中。

获取已调整大小的图像的clientWidth和clientHeight

3 个答案: