將鼠標懸停時放大圖像

Question

我試圖建立一個網站，所以我有一個圖像，當我將它懸停時，我希望它能縮放，但問題是圖像縮放與一個壞的方式它出來一個div如何我可以修復？

<div class="container"> 
    <img src="image.jpg" alt="" height="400" width="500"/> 
</div> 

我的CSS樣式

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
} 
.container:hover img{ 
    height: 500px; 
    width: 600px; 
} 

FIDDLE

Answer 1

嘗試添加overflow: hidden到div這樣的內容將被裁剪，並對其內容的其餘部分將是無形的

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
    overflow: hidden 
} 
.container:hover img{ 
    height: 500px; 
    width: 600px; 
} 

Answer 2

這樣的事情JS Fiddle？

.container { 
 
    height: 400px; 
 
    width: 500px; 
 
    border: 2px solid red; 
 
    overflow: hidden 
 
} 
 
.container img {  /* add this rule */ 
 
    width:100%;; 
 
    height:100%; 
 
    transition:all 0.7s ease-in-out; 
 
} 
 
.container:hover img { /* change this rule */ 
 
    width:120%; 
 
    height:120%; 
 
    margin:-10% 0 0 -10%; 
 
    transition:all 0.7s ease-in-out; 
 
}

<div class="container"> 
 
    <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" /> 
 
</div>

Answer 3

其中最有效的方法將是使用scale過渡CSS屬性如下，

.container{ 
    height: 400px; 
    width: 500px; 
    border: 2px solid red; 
    overflow: hidden; 
} 

.container:hover img{ 
    transform: scale(1.25); 
} 

通過使用scale屬性，圖像會順利放大所有設備包括移動設備。因此，您無需爲每個設備指定準確的高度和寬度值。

希望這有助於:)