javascript - 适合对象 : get resulting dimensions

Question

当使用新的 CSS 功能 object-fit 时，如何访问浏览器通过 JavaScript 选择的结果尺寸？

那么让我们假设 foo.jpg 是 100x200 像素。浏览器页面/视口(viewport)为 400 像素宽和 300 像素高。然后给出这个 CSS 代码:

img.foo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 25% 0;
}

浏览器现在会在最顶部显示图像，正确的纵横比从左边第二个四分之一处延伸到最底部。这导致这些图像尺寸:

• 宽度:150px
• 高度:300px
• 左:62.5px
• 右:212.5px

那么什么 JavaScript 调用(允许 jQuery)会给我那些我手动计算的数字？(注意:JavaScript 不知道 CSS 信息本身，因为用户可以覆盖它们，甚至可以添加诸如 min-width 之类的东西)

为了玩转我创建了一个 fiddle 的代码:https://jsfiddle.net/sydeo244/

Answer 1

感谢@bfred，我不必制作初始方法。

这是他的扩展(和重写)版本，它也计算 object-position 值。

function getRenderedSize(contains, cWidth, cHeight, width, height, pos){
  var oRatio = width / height,
      cRatio = cWidth / cHeight;
  return function() {
    if (contains ? (oRatio > cRatio) : (oRatio < cRatio)) {
      this.width = cWidth;
      this.height = cWidth / oRatio;
    } else {
      this.width = cHeight * oRatio;
      this.height = cHeight;
    }      
    this.left = (cWidth - this.width)*(pos/100);
    this.right = this.width + this.left;
    return this;
  }.call({});
}

function getImgSizeInfo(img) {
  var pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' ');
  return getRenderedSize(true,
                         img.width,
                         img.height,
                         img.naturalWidth,
                         img.naturalHeight,
                         parseInt(pos[0]));
}

document.querySelector('#foo').addEventListener('load', function(e) {
  console.log(getImgSizeInfo(e.target));
});

#container {
  width: 400px;
  height: 300px;
  border: 1px solid blue;
}

#foo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 25% 0;
}

<div id="container">
  <img id="foo" src="http://dummyimage.com/100x200/000/fff.jpg"/>
</div>

边注

object-position 似乎可以有 2 个以上的值，当您需要调整(或添加)哪个参数返回左侧位置值时