对象拟合:获取结果尺寸 [英] object-fit: get resulting dimensions

问题描述

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

When using the new CSS feature object-fit, how can I access the resulting dimensions that the browser has chosen by JavaScript?

因此，我们假设foo.jpg是100x200像素.浏览器页面/视口的宽度为400px，高度为300px.然后给出以下CSS代码:

So let's assume foo.jpg is 100x200 pixels. The browser page / viewport is 400px wide and 300px high. Then given this CSS code:

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

现在，浏览器将在最上方显示图像，并且正确的宽高比会延伸到左侧第二个季度的最底部.这样就得到了这些图像尺寸:

The browser would now show the image on the very top with correct aspect ration stretching to the very bottom on the second quarter from the left. This results in those image dimensions:

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

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

So what JavaScript call (jQuery allowed) would give me those numbers that I've calculated manually? (Note: the CSS information themselves are not known by the JavaScript as the user could overwrite them and even add stuff like min-width)

要使用代码，我创建了一个小提琴: https://jsfiddle.net/sydeo244/

To play with the code I've created a fiddle: https://jsfiddle.net/sydeo244/

推荐答案

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

Thanks to @bfred I didn't have to make the initial method.

这是他的扩展(并重写)版本，它也可以计算object-position值.

Here is an extended (and rewritten) version of his, that does calculate the object-position values as well.

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可以有两个以上的值，何时需要调整(或添加)哪个参数返回左位置值

It appears that object-position can have more than 2 values, and when, you need to adjust (or add) which parameter returns the left position value

这篇关于对象拟合:获取结果尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！