html - 悬停时图像缩放效果

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)  ; 
 }