对象适合并在Firefox中悬停

Question

我想用他的父维度拟合图像。我不想将图像用作背景，因为对于谷歌而言，无论图像是用于样式还是用于内容提议，都不清楚。

无论如何，我发现物体适合并且似乎是我需要的。

我现在面临的一个大问题是，对象适合和悬停不能像我预期的那样协同工作。

这是我的代码：

<div>
  <img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>

<style>
div{
  width:200px;
  height:100px;
  overflow:hidden;
}

div img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.5;
}

div img:hover{
  opacity:1;
}
</style>

这是我的小提琴：

http://jsfiddle.net/jx0ntkmy/

悬停几次，您会看到图像失真。我测试过firefox和chrome。在chrome中没有问题，但在Firefox中它是。