使用 CSS object fit 转换 img 时存在失真答案

【问题标题】：Distortion is present when transitioning img with CSS object fit使用 CSS object fit 转换 img 时存在失真
【发布时间】：2015-08-11 09:05:12
【问题描述】：

当我将鼠标悬停在图像上时，我在 Chrome 和 Firefox 以及这两个浏览器中检查了它，转换似乎忘记了应用了 object-fit 规则。

这是一个错误还是有什么问题？

编辑：我发现如果我将 img 放入 div 并为 div 设置动画效果会很好看。但出于 css 的原因，我不想修改我的 html。

* {
  padding: 0;
  margin: 0;
}
figure {
  width: 400px;
  height: 150px;
  overflow: hidden;
}
figcaption {
  position: absolute;
  z-index: 1;
  color: white;
  font-family: Arial;
  top: 10px;
  left: 10px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}
img:hover {
  transform: scale(1.2);
}

<figure>
  <figcaption>Title</figcaption>
  <img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

您必须将高度设置为自动：

* {
  padding: 0;
  margin: 0;
}
figure {
  width: 400px;
  height: 150px;
  overflow: hidden;
}
figcaption {
  position: absolute;
  z-index: 1;
  color: white;
  font-family: Arial;
  top: 10px;
  left: 10px;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}
img:hover {
  transform: scale(1.2);
}

<figure>
  <figcaption>Title</figcaption>
  <img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>

【讨论】：

抱歉，如果您这样做，即使您没有注意到，对象拟合也不起作用。图像应该居中而不是...
确实，我没有注意到这一点。所以也许你可以试试这个：stackoverflow.com/questions/30006545/…希望它可以帮助。