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

Answer 2

You can get the dimensions of an element through JavaScript with a few methods:

Total Displayed Area - measures the displayed area the content with all additional features takes up like margins, borders, etc.

element.offsetHeight;
element.offsetWidth; 

Displayed Content - measures the content visible (padding included).

element.clientHeight;
element.clientWidth;

Total Content - measures the total content visible and hidden (padding included).

element.scrollHeight;
element.scrollWidth;