object-fit 的替代选项：包含 IE [重复]答案

【问题标题】：Alternative option of object-fit:contain for IE [duplicate]object-fit 的替代选项：包含 IE [重复]
【发布时间】：2017-05-04 18:12:52
【问题描述】：

我正在寻找对象匹配的替代选项：包含，因为 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>

有什么办法吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

这是一个示例，其中 350x150 像素的图像适合包含在 132x132 像素的容器中而无需拉伸。

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

或者，如果您可以使用 background-image 代替 img，那么还有一种更简洁的编码方式：

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

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

【讨论】：

对于 IE11 图像拉伸修复，还要在 <img/> 本身上添加 flex-shrink: 0。