Zmiana szerokości/wysokości obrazu nie działa

Question

Stosowanie przejścia podczas powiększania obrazu nie działa w trybie chromowania.

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

Fiddle: http://jsfiddle.net/6Dk4D/

Co jest nie tak?

Answer 1

Nie będzie działać z procentami, jak się wydaje. Ponadto, jeśli chcesz przejść również do wersji height, musisz ją zadeklarować w stylu stylizacji img. Pokazano tutaj: http://jsfiddle.net/Skooljester/6Dk4D/1/ działa, jeśli podmienisz w pikselach wartość width.

Edycja: Jeśli podasz pierwszą wartość width jako wartość procentową, można również zdefiniować drugą wartość procentową i nadal działać. Dziękujemy Tyilo

Answer 2

Można również użyć sztuczki max-width. Ustaw wysoki poziom max-width na zawisie, a oryginalna szerokość obrazu zostanie zachowana przez przejście.

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