懸停CSS縮放圖片時不改變圖片的大小（僅限縮放內容）

Question

抱歉，我的英文不好。無論如何，希望任何人都可以幫忙。

我嘗試實現以下內容：在頁面內我有一個圖像。由於它是在WordPress的非專業人士可以編輯它。我希望通過鼠標懸停圖像來縮放圖像內的圖像內容。 （所以圖像本身不應該改變其大小），即我有一個200 x 200像素的圖像。在鼠標懸停後，我希望它仍然有這個尺寸，但內部的內容應該放大。圖像大小可以不同。所以我從來不知道exakt措施。

它必須在我認爲的img-tag上完成。沒有機會在其周圍放置div或任何東西。任何人都知道解決方案？

編輯：所以 - 我希望懸停時的圖像更大，但被裁剪爲非懸停狀態的大小。

謝謝！ 邁克

Answer 1

這聽起來像你需要一個transform:scale

HTML

<div class="box"> 
    <img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/> 
</div> 

CSS

.box { 
    width:250px; 
    height:250px; 
    padding:10px; 
    margin: 25px; 
    border:1px solid grey;; 
} 


img { 
    display: block; 
    transition:all 0.25s ease; 
} 

.box:hover img { 
    -webkit-transform:scale(1.25) 
} 

JSfiddle Demo

Answer 2

將以下樣式添加到.box。

overflow: hidden;