Javascript 如何仅使用CSS显示固定高度div内图像的隐藏部分？

我有一个大小为150x150的容器div，其中包含一个大小为150x180的图像。div启用了

overflow:hidden

css属性，因此图像的一部分被隐藏。Div大小固定为150x150，但图像高度可能因图像而异。当我将鼠标悬停在div或图像上时，我希望垂直移动图像，以便将图像的隐藏部分显示给查看者

为了使这个功能发挥作用，我使用了jQuery。下面是我正在做的（我的css、html、jQuery代码块）：

$（“#容器”）.mouseenter（函数（）{
img_height=$（this.find（'img'）.height（）；
$（this.find（'img'）。设置动画({
“顶部”：150-img_高度
}, 300);
});
$（“#容器”）.mouseleave（函数（）{
$（this.find（'img'）。设置动画({
“顶部”：0
}, 300);
});
#容器{
宽度：150px；
高度：150像素；
溢出：隐藏；
边框：1px实心；
位置：相对位置；
}
#容器img{
位置：绝对位置；
}
身高100%就可以了


#容器{
宽度：150px；
高度：150像素；
溢出：隐藏；
边框：1px实心；
位置：相对位置；
}
#容器img:悬停{
身高：100%；
}


在图像上使用过渡
对包含图像的div使用固定的px高度
无需绝对定位图像（仅当
div中有其他元素时才需要

这是密码

<div class="imgWrap">
  <img src="http://lorempixel.com/g/150/180" alt="" class="img1"> 
</div>

我为这个设计了一支钢笔
试试这个。主要思想是在加载图像时设置样式中的初始垂直偏移

<img onload="this.style.bottom = '' + (150 - this.offsetHeight) + 'px' src="..." />


谢谢你的评论@Alain1405，但事情并没有那么简单。我希望图像比例保持不变，因此如果图像的宽度：高度为4:3，它应该保持原样，并且图像的隐藏部分应该通过整体移动图像而不是收缩图像来显示给观众。我不确定为什么会投反对票。我想是这样的这是一个很好的合理问题。您建议的方法适用于所有固定高度的图像（例如150px）。但对于不同高度的图像，上述代码仍将设置-30px的边距。如何设置可变边距？
<img onload="this.style.bottom = '' + (150 - this.offsetHeight) + 'px' src="..." />