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

Question

在此处输入图片说明

在上图中，您可以看到原始图像大小和图像在赋予“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/ ]