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

Question

enter image description here

在上图中，您可以看到原始图像大小和图像在赋予属性“object-fit:contain”后缩小。

我们可以在给出“Object-fit:contain”属性后计算出有效的图像尺寸吗？

Answer 1

加载后的图像对象包含容器的显示尺寸和原始图像的尺寸。所以计算相当简单：

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/]

Answer 2

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

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

element.offsetHeight;
element.offsetWidth; 

Displayed Content - 测量可见的内容（包括填充）。

element.clientHeight;
element.clientWidth;

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

element.scrollHeight;
element.scrollWidth;