javascript - object-fit 的替代选项 :contain for IE

Question

<分区>

Answer 1

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

这是一个 350x150 像素的图像适合包含在 132x132 像素的容器中而不拉伸(stretch)的示例。

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

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