how can we get new image size dimension after giving object-fit:contain property to the image tag?

Question

enter image description here

In the above image, you can see the original image size and image get shrink after giving the property "object-fit:contain".

can we calculate the effective image size after giving "Object-fit:contain" property.

Answer 1

The image object after loading contains both the displayed dimensions of the container and the dimensions of the original image. So the calculations are fairly simple:

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