Css 设置父宽度动画时将图像居中？

我有一个div作为图像的查看端口。我希望div在鼠标上方扩展其宽度，并使内部图像保持移动和居中。以下代码正是我想要的：

HTML和CSS

.image{
宽度：10%；
背景：透明中心；
高度：200px；
过渡：宽度2s立方贝塞尔（.15,88,0,99）；
-o型过渡：宽度为2s的三次贝塞尔（.15.88,0.99）；
-ms转换：宽度为2s的三次贝塞尔（0.15,88,0.99）；
-moz变换：宽度为2s的三次贝塞尔（0.15,88,0,99）；
-webkit过渡：宽度为2s的立方贝塞尔（.15.88,0.99）；
}
.图片：悬停{
宽度：70%；
}

---

看看这个，我添加了

将改变：转换

到

.image2 img

意味着它将向GPU提供动画。你穿起来好看吗

上面有一些

.image2{
位置：相对位置；
宽度：10%；
高度：200px；
溢出：隐藏；
过渡：宽度2s立方贝塞尔（.15,88,0,99）；
-o型过渡：宽度为2s的三次贝塞尔（.15.88,0.99）；
-ms转换：宽度为2s的三次贝塞尔（0.15,88,0.99）；
-moz变换：宽度为2s的三次贝塞尔（0.15,88,0,99）；
-webkit过渡：宽度为2s的立方贝塞尔（.15.88,0.99）；
}
.image2：悬停{
宽度：70%；
}
.image2 img{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
改变：转变；
}

我觉得这是一个非常特定于Chrome的问题，或者可能是webkit？似乎是我正在使用的唯一一个显示如此起伏过渡的浏览器。@Serlite如果您能想到基于HTML标记的其他css实现，请告诉我？我正在与一位客户合作，他希望他们的界面具有高质量。我也在努力使事情符合WCAG，所以有意义的标记将是好的。理论上，我可以使用Javascript将image src属性复制到div样式属性中，但我更愿意避免使用bandaid。我见过的唯一选择是通过实现3d

transform:translate3d（-50%，-50%，0）来强制硬件加速。