How to Get New Image Size Dimension After Giving Object-Fit:Contain Property to the Image Tag

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

object-fit: get resulting dimensions

Thanks to @bfred I didn't have to make the initial method.

Here is an extended (and rewritten) version of his, that does calculate the object-position values as well.

function getRenderedSize(contains, cWidth, cHeight, width, height, pos){  var oRatio = width / height,      cRatio = cWidth / cHeight;  return function() {    if (contains ? (oRatio > cRatio) : (oRatio < cRatio)) {      this.width = cWidth;      this.height = cWidth / oRatio;    } else {      this.width = cHeight * oRatio;      this.height = cHeight;    }          this.left = (cWidth - this.width)*(pos/100);    this.right = this.width + this.left;    return this;  }.call({});}
function getImgSizeInfo(img) {  var pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' ');  return getRenderedSize(true,                         img.width,                         img.height,                         img.naturalWidth,                         img.naturalHeight,                         parseInt(pos[0]));}
document.querySelector('#foo').addEventListener('load', function(e) {  console.log(getImgSizeInfo(e.target));});

#container {  width: 400px;  height: 300px;  border: 1px solid blue;}
#foo {  width: 100%;  height: 100%;  object-fit: contain;  object-position: 25% 0;}

<div id="container">  <img id="foo" src="http://dummyimage.com/100x200/000/fff.jpg"/></div>

Object-fit not affecting images

object-fit only affects the way the picture displays inside of the img boundaries.

Object-Fit

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Replaced Element

elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

This means that the object-fit is independent of your article elements as object-fit only cares about the dimensions of the img element.

The point of this is that you need to get the img elements to stretch to those dimensions first. The object-fit only affects the way the picture displays inside of the img boundaries.

Sample Code / Demonstration

$(function() { $("img").resizable(); });

img {
  width: 300px;
  height: 300px;
  border: 1px solid #FF0000;
  background-color: #00FF00;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scaledown {
  object-fit: scale-down;
}

.variant1 {
  max-width: 100px;
}

.variant2 {
  max-height: 100px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Resize images to see properties with different dimensions.</p>

<h1>fill (default)</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="fill" />

<h1>contain</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="contain" />

<h1>cover</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="cover" />

<h1>none</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="none" />

<h1>scale-down</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="scaledown" />
<!-- Spacer for scale down scroll annoyance -->
<br /><br /><br /><br /><br /><br /><br />

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

CSS object-fit: contain; is keeping original image width in layout

What you have is logical, you simply need to understand how object-fit works. Let's start with an easier example:

.box {  width:300px;  height:300px;  border:1px solid;}img { width:100%; height:100%; object-fit:contain;}

<div class="box">  <img src="https://picsum.photos/300/200?image=1069"></div>

How do you stretch an image to fill a div while keeping the image's aspect-ratio?

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

As an example, you could have a container that holds an image:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

---

Related Topics