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.

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.

• javascript
• jquery
• css
• contains
• object-fit

• 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. – G-Cyrillus Commented Sep 5, 2018 at 14:28

2 Answers 2

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