圖像縮放/成長在縮略圖

Question

我有一種圖像和一些文字裏面的縮略圖。當我將鼠標懸停在圖片，它會放大 這裏是一個小提琴： https://jsfiddle.net/ShiroiOkami/r1awd3b4/

我想達到的圖像只是拉近的效果，但它的尺寸保持不變。我不希望它增長。怎麼做？

P.S.例如代碼：

<div class="wrapper"> 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow"> 
    <div class="description"> 
    <h3> 
    Some title 
    </h3> 
    <p> 
    some text 
    </p> 
    </div> 

CSS：

.wrapper{ 
    background-color: #fff; 
    text-align: center; 
    width: 150px; 
    overflow: hidden; 
} 

.grow{ 
     transition: all .2s ease-in-out; 
-webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
} 

.grow:hover{ 
     transform: scale(1.1); 
-webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
} 

.description{ 
    background-color: #fff; 
    overflow: hidden; 
    } 

Answer 1

我定你的小提琴，所以你會得到所要求的效果：https://jsfiddle.net/r1awd3b4/1/

我有什麼完成是在圖像周圍添加一個額外的包裝div：

<div class="img-wrapper"> 
    <img src="..." class="grow"> 
</div> 

CSS：

.img-wrapper{ 
    width: 100%; 
    height: 150px; 
    overflow: hidden; 
} 

.img-wrapper img{ 
    display: block; 
    width: 100%; 
} 

現在的圖像能夠種植就是了，但因爲包裝不會，圖像不會「成長」，而只是「放大」。

Answer 2

可能是你的意思是這樣的效果？：

<div class="wrapper"> 
    <div class="img-container"> 
     <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow"> 
    </div> 
    <div class="description"> 
     <h3>Some title</h3> 
     <p>some text</p> 
    </div> 
</div> 

和CSS：

.img-container { 
    width: 150px; 
    height: 150px; 
    overflow: hidden; 
}