Jquery 悬停时缩放div内的图像

我希望得到这样的效果：

假设如下：

在鼠标移动之前，必须缩小图像（左平铺），使照片的上边缘与边框的边缘相等（！）

悬停后，照片缩小，图像的上边缘始终与帧的边缘对齐并显示。下图为白色背景，产品名称和价格（如图所示）

无论照片的大小，相框的高度必须始终相同

问题是：我不知道如何使每张照片适合不同屏幕宽度的相框宽度

我的代码：

jQuery（文档）.ready（函数（$）{
var$zdjecie=$（'.woocmerce ul.products li.product img'）；
$（'.woocmerce ul.products li.product'）。悬停(
函数（）{
$（this.find（'img'）.css({
“变换”：“比例（1）”，
“顶部”：“0”，
“位置”：“相对”
});
},
函数（）{
$（this.find（'img'）.css({
“变换”：“比例（1.6,1.5）”，
“顶部”：“，
“位置”：“相对”
});
})
})

//无论屏幕宽度如何，帧的高度都是不同的
.woocommerce ul.products li.product a img{
-webkit变换原点：中心；
-ms变换原点：中心；
变换原点：中心；
变换：比例（1.6,1.5）；
top:60px；//这里可能有问题
位置：相对位置；
-webkit转换：转换0.4s线性，顶部0.4s线性；
-moz变换：变换0.4s线性，顶部0.4s线性；
-ms过渡：变换0.4s线性，顶部0.4s线性；
过渡：变换0.4s线性，顶部0.4s线性；
}

您可以使用

位置：绝对，具有负的左/右边距和固定高度来定位图像。

然后在悬停时缩放图像以显示文本。
以下是一个例子：


.wrap{
显示器：flex；
}
艾尔先生{
位置：相对位置；
利润率：20px；
外形：1px实心达克朗格；
轮廓偏移：10px；
宽度：250px；高度：420px；
填充顶部：340px；
框大小：边框框；
文本对齐：居中；
溢出：隐藏；
}
el img先生{
位置：绝对位置；
排名：0；
左：-100%；右：-100%；
高度：350px；宽度：自动；
保证金：自动；
变换原点：50%0；
转换：比例（1.2）；
转变：转变。3秒放松；
}
.el:悬停img{
变换：比例（1）；
}

标题在这里
这里有一些文字

标题在这里
这里有一些文字

您可以使用引导网格布局。此时，Wordpress显示一个内置的产品选项。您认为我可以通过使用Bootstrap类编写手工代码来实现这种效果吗？也许是jquery插件？