CSS大小轉換留在父div

Question

我想有一個圖像框，當我在它上面的圖像會放大一點（我正在使用大小過渡），但框架將保持相同的大小。

現在做什麼，即使框架有一個固定的寬度和高度，這是平息放大與圖像

HTML發生：

<div class="img-wrapper"> 
    <img class="thumbnail" src="http://placekitten.com/400/200"> 
</div> 

和CSS

.img-wrapper { 
    width: 400px; 
} 
.thumbnail { 
    width: 400px; 
} 

.thumbnail { 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
} 

.thumbnail:hover { 
    width: 500px; 

    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
} 

http://codepen.io/pen/KCJny

Answer 1

解決這個問題的一種方法是設置overflow：hidden;

所以，這可能工作：

.img-wrapper { 
    width: 400px; 
    height:200px; 
    overflow:hidden; 
} 

Answer 2

如果你想要的形象保持居中（作爲除了Brian的回答）你可以這樣做：

.thumbnail { 
    width: 400px; 
    position:relative; 
    left:50%; 
    margin-left:-200px; 
} 

.thumbnail:hover { 
    width: 500px; 
    margin-left:-250px; 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
}