使用CSS对象拟合转换img时会出现失真

我在Chrome和Firefox中检查了它，在这两种浏览器中，当我将鼠标悬停在图像上时，转换似乎忘记了应用了

对象匹配

规则

这是一个bug还是有什么问题

EDIT：我发现如果我把img放在

div

中，并设置

div

的动画效果会很好。但是由于css的原因，我不想修改我的html。

*{
填充：0；
保证金：0；
}
身材{
宽度：400px；
高度：150像素；
溢出：隐藏；
}
菲卡普顿{
位置：绝对位置；
z指数：1；
颜色：白色；
字体系列：Arial；
顶部：10px；
左：10px；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
对象位置：中心；
转型：转型0.5s轻松；
}
img：悬停{
转换：比例（1.2）；
}

标题

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

*{
填充：0；
保证金：0；
}
身材{
宽度：400px；
高度：150像素；
溢出：隐藏；
}
菲卡普顿{
位置：绝对位置；
z指数：1；
颜色：白色；
字体系列：Arial；
顶部：10px；
左：10px；
}
img{
宽度：100%；
高度：自动；
对象匹配：覆盖；
对象位置：中心；
转型：转型0.5s轻松；
}
img：悬停{
转换：比例（1.2）；
}

标题

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