La transición de ancho/alto de la imagen no funciona

Question

Al utilizar una transición cuando la ampliación de una imagen no parece funcionar en cromo.

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%; 
     } 

violín: http://jsfiddle.net/6Dk4D/

Cuál es el problema?

Answer 1

Parece que no funcionará con porcentajes. Además, si también desea hacer la transición height, debe declararlo en el estilo original img. Aquí se muestra: http://jsfiddle.net/Skooljester/6Dk4D/1/ funciona si especifica un width en píxeles para el elemento emergente.

Editar: Si especifica el primer width como un porcentaje, entonces el segundo también se puede definir con un porcentaje y aún así funcionar. Gracias Tyilo

Answer 2

También puede utilizar un truco max-width. Establezca una cantidad alta de max-width en el elemento emergente y la transición respetará el ancho de la imagen original.

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