懸停時的圖像縮放效果

Question

這個想法是在鼠標懸停時創建縮放效果。 但是由於高度是“自動”的，因此放大的圖像不包含在div中，而是增加高度。 為了響應性設計的目的，我必須保持高度“自動”。 一條路將不勝感激。 以下是鏈接： http : //jsfiddle.net/nitish_8/zaeZ4/

<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>

Answer 1

試用以下代碼將項目div懸停，希望這對您有所幫助

.item:hover img {
    -webkit-transition: all 21s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: al 1s ease-in-out;
    transition: all 1s ease-in-out;
    transform:  scale(1.1) ;
    -webkit-transform:scale(1.1) ;
    -moz-transform:  scale(1.1) ;
    -o-transform:  scale(1.1)  ;
    -ms-transform: scale(1.1)  ; 
 }

Answer 2

我認為您可以從item類中刪除ovewflow屬性，以使div不剪切放大的圖像

Answer 3

來自TalkersCode.com的代碼，這里是完整的教程http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

.item img 
{
 max-width: 100%;
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 width:250px;
 height:220px;
}
.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}