在懸停時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>