如何在赋予图像标签对象-FIT：CONTAINE属性后获得新的图像尺寸尺寸？ [英] how can we get new image size dimension after giving object-fit:contain property to the image tag?

问题描述

enter image description here

在上图中，您可以看到原始图像的大小以及在赋予属性"Object-Fit：Container"后图像变小。

给出"Object-Fit：Container"属性后，我们是否可以计算有效的图像大小。

推荐答案

加载后的图像对象既包含容器的显示尺寸，也包含原始图像的尺寸。因此，计算相当简单：

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

这篇关于如何在赋予图像标签对象-FIT：CONTAINE属性后获得新的图像尺寸尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！