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.

Algology

css will adapt to the highest image . If you use javascript to find out which is the lowest , object-fit:contain will leave a gap on either sides of the higest (you get the opposite behavior) . clipping could be an option. height : 100% is also the reason . Can you set a full working snippet and clarify your needs/issue. – Egidio

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

Machination

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;

Nosepiece

Sorry but I have other question. Please check the image i.sstatic.net/sjcVN.jpg – Algology

None of this give the rendered width/height after applying css object-fit – Caulk