Alternative option of object-fit:contain for IE

Question

I'm looking for an alternative option of object-fit: contain because It's not supported by Internet explorer. Here's my sample code

.cbs-Item img {
    height: 132px ! important;
    width: 132px ! important;
    object-fit: contain;




<div  class="cbs-Item">
  <img alt="image" src="" width="146" style="BORDER:0px solid;">
</div>

Any solution?

Answer 1

You can use clever positioning to size the image, maintain its proportions, and center it within a container.

Here's an example with a 350x150px image fit to contain within a 132x132px container without stretching.

.cbs-Item {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
}

.cbs-Item img {
  max-width: 100%;
  max-height: 100%;
}

<div  class="cbs-Item">
  <img src="http://placehold.it/350x150" />
</div>

Alternatively, there's a cleaner way to code it if you can use background-image instead of img:

.cbs-Item {
  background: #eee;
  height: 132px;
  width: 132px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

<div class="cbs-Item" style="background-image: url('http://placehold.it/350x150');"></div>