在将 object-fit:contain 属性 赋予图像标签后，我们如何获得新的图像尺寸维度？

Question

enter image description here

在上图中，您可以看到原始图像大小和图像在给定 属性 "object-fit:contain" 后缩小了。

给"Object-fit:contain" 属性.

后能不能算出有效图片尺寸

Answer 1

您可以通过 JavaScript 通过以下几种方法获取元素的尺寸：

总显示区域 - 测量内容以及所有附加功能（如边距、边框等）占用的显示区域

element.offsetHeight;
element.offsetWidth; 

显示内容 - 测量可见内容（包括填充）。

element.clientHeight;
element.clientWidth;

总内容 - 测量可见和隐藏的总内容（包括填充）。

element.scrollHeight;
element.scrollWidth;

Answer 2

加载后的图片对象既包含容器显示的尺寸，也包含原图的尺寸。所以计算相当简单：

function getContainedSize(img) {
  var ratio = img.naturalWidth/img.naturalHeight
  var width = img.height*ratio
  var height = img.height
  if (width > img.width) {
    width = img.width
    height = img.width/ratio
  }
  return [width, height]
}

[http://jsfiddle.net/wvbpcjhk/]