在悬停时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>