Javascript 如何根据图像的高度翻译图像？

我有一个高大的形象，那是在一个不那么高的隔间里。我想通过翻译来展示整个图像。这就是我到目前为止所做的：

document.addEventListener（“鼠标悬停”，函数（事件）{
var元素=event.target；
if（element.classList.contains（“myImage”）&&
element.naturalWidth
div{
高度：200px；
溢出：隐藏；
背景色：红色；
}
img{
-moz转换：所有3个易于输入输出；
-o-转换：所有3个易于输入输出；
-webkit过渡：所有3个易于输入输出；
过渡：所有3个易于输入输出；
}
.imageScroll{
-moz变换：平移（0，-350px）；
-ms变换：平移（0，-350px）；
-o变换：平移（0，-350px）；
-webkit转换：转换（0，-350px）；
转换：转换（0，-350px）；
}
对于纯CSS，您可以在转换中使用百分比单位，然后使用顶部偏移（绝对位置）减去容器的高度：


div{
高度：200px；
溢出：隐藏；
位置：相对位置；
}
.myImage{
过渡：所有3个易于输入输出；
显示：块；
位置：绝对位置；
顶部：0；左侧：0；
}
.myImage:悬停{
最高：100%；
转换：translateY（-100%）；
}
注释掉的代码缺少“px”

谢谢你指出这一点！我更改了代码，但这并没有解决我的问题。非常接近！但是在calc方法中使用200px会导致白间隔。你知道在没有这么多硬编码的情况下怎么做吗？@哦，是的，空白在哪里？我不明白it@ohyeah确保使用cssreset@Aziz我的错误是，我没有很好地阐述我的问题：我将div背景设置为红色以说明问题。一旦div的高度改变，硬编码的200px就不再工作了。实际情况中的div可能会改变大小，导致任何硬编码值失败。@哦，是的，请参见更新，使用位置偏移量而不是calc（）
 element.style.transform = "translate(0,-" + element.naturalHeight + "px)";
 element.style.mozTransition = "translate(0,-" + element.naturalHeight + "px)";
 element.style.msTransform = "translate(0,-" + element.naturalHeight + "px)";
 element.style.oTransform = "translate(0,-" + element.naturalHeight + "px)";
 element.style.webkitTransform = "translate(0,-" + element.naturalHeight + "px)";