CSS調整大小/放大對圖像的影響，同時保持尺寸

Question

我想使用CSS3 scale()轉換的翻轉效果，但我想保持翻轉圖像的尺寸相同。所以，效果是圖像放大，但它仍然受限於其現有的寬度和高度。

img:hover { 
    transform:scale(1.5); 
    -ms-transform:scale(1.5); /* IE 9 */ 
    -moz-transform:scale(1.5); /* Firefox */ 
    -webkit-transform:scale(1.5); /* Safari and Chrome */ 
    -o-transform:scale(1.5); /* Opera */ 
} 

這是一個基本fiddle開始說起。

但是，我想要圖像保持寬度/高度。

我沒有結婚使用css3的規模。也許有更好的方法調整元素的大小。

Answer 1

你可以做到這一點簡單地通過一個<div>包裝形象和增加overflow: hidden該元素：

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

.img-wrapper { 
    display: inline-block; /* change the default display type to inline-block */ 
    overflow: hidden;  /* hide the overflow */ 
} 

WORKING DEMO。

---

另外值得注意的是<img>元件（像其他內聯元素）坐在其baseline默認。和there would be a 4~5px gap at the bottom of the image。

該垂直間隙屬於下行鏈路的保留空間，如：g j p q y。您可以通過將vertical-align屬性添加到具有baseline以外的值的圖像來修復對齊問題。

此外，爲了更好的用戶體驗，您可以將transition添加到圖像。

因此，我們會與下面的結束：

.img-wrapper img { 
    transition: all .2s ease; 
    vertical-align: middle; 
} 

UPDATED DEMO。