object-fit的替代选项:包含IE

Question

我正在寻找object-fit: contain的替代选项，因为Internet explorer不支持它。下面是我的示例代码

.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>

有什么解决方案吗？

Answer 1

您可以使用巧妙的定位来调整图像大小，保持其比例，并使其在容器中居中。

下面是一个350x150px的图像示例，适合包含在132x132px的容器中，而不需要拉伸。

​

.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>

​

或者，如果你可以使用背景图像而不是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>

​