圖像寬度/高度轉換不起作用

Question

放大圖像時使用轉換在chrome中似乎不起作用。

HTML：

<img src="foobar.png"> 

CSS：

 img 
     { 
      float: left; 
      margin-right: 10px; 
      border-radius: 10px; 
      width: 200px; 
      -webkit-transition: width 1s ease, height 1s ease; 
     } 
     img:hover 
     { 
      width: 100%; 
     } 

小提琴：http://jsfiddle.net/6Dk4D/

有什麼不對？

Answer 1

它似乎無法與百分比一起工作。此外，如果您還想轉換height，則需要在原始img樣式中聲明它。此處顯示：http://jsfiddle.net/Skooljester/6Dk4D/1/它適用於您爲懸停指定像素爲width的作品。

編輯：如果您指定第一個width作爲百分比，那麼第二個可以用百分比定義並仍然有效。 謝謝你Tyilo

Answer 2

你也可以使用max-width技巧。在懸停上設置較高的max-width量，並且轉換時將遵守原始圖像寬度。

http://codepen.io/rustydev/pen/BKOBNZ