在悬停时div内的缩放图像

Question

我希望得到这样的效果:

假设如下:

1. 在鼠标中心(左侧平铺)之前,必须缩小图像,使照片的上边缘等于边框(!)
2. 悬停后,照片会缩小,图像的上边缘始终与边框对齐并显示.下面的照片是白色背景,产品名称和价格(如图所示)
3. 无论照片的大小如何,框架的高度必须始终相同

有什么问题:我不知道如何使每张照片适合不同屏幕宽度的帧宽

我的代码:

jQuery(document).ready(function($) {

  var $zdjecie = $('.woocommerce ul.products li.product img');

  $('.woocommerce ul.products li.product').hover(
    function() {
      $(this).find('img').css({
        'transform': 'scale(1)',
        'top': '0',
        'position': 'relative'
      });
    },
    function() {
      $(this).find('img').css({
        'transform': 'scale(1.6, 1.5)',
        'top': '',
        'position': 'relative'
      });
    })
})

//the height of frame is different regardless of screen wide
.woocommerce ul.products li.product a img {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  transform: scale(1.6, 1.5);
  top: 60px; // here may be problem
  position: relative;
  -webkit-transition: transform 0.4s linear, top 0.4s linear;
  -moz-transition: transform 0.4s linear, top 0.4s linear;
  -ms-transition: transform 0.4s linear, top 0.4s linear;
  transition: transform 0.4s linear, top 0.4s linear;
}

我得到了什么影响:

Answer 1

您可以position:absolute;在图像上使用负左/右边距和固定高度来定位图像.
然后在悬停时缩放图像以显示文本.这是一个例子:

.wrap{
  display:flex;
}
.el{
  position:relative;
  margin:20px;
  outline:1px solid darkorange;
  outline-offset : 10px;
  width:250px; height:420px;
  padding-top:340px;
  box-sizing:border-box;
  text-align:center;
  overflow:hidden;
}
.el img{
  position:absolute;
  top:0;
  left:-100%; right:-100%;
  height:350px; width:auto;
  margin:auto;
  transform-origin:50% 0;
  transform:scale(1.2);
  transition:transform .3s ease-out;
}
.el:hover img{
  transform: scale(1);
}

<div class="wrap">
  <div class="el">
    <img src="http://via.placeholder.com/640x480" alt="">
    <h3>The title here</h3>
    <p>Some text here</p>
  </div>
  <div class="el">
    <img src="http://via.placeholder.com/480x640" alt="">
    <h3>The title here</h3>
    <p>Some text here</p>
  </div>
</div>