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

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

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;