Переход ширины / высоты изображения не работает

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 в процентах, то второе можно определить с помощьюпроцент, а также все еще работают. Спасибо Тейло

Answer 2

Вы также можете использовать max-width трюк. Установите высокое значение max-width для наведения, и при переходе будет учитываться исходная ширина изображения.

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