Question

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

或者，如果您可以使用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>

对象适合的替代选项：包含IE

1 个答案: