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

Использование перехода при увеличении изображения не работает в хроме.

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/

Что не так?

Ответы

Ответ 1

Он не будет работать с процентами. Кроме того, если вы хотите перейти height, вам нужно объявить его в стиле orignal img. Показанный здесь: http://jsfiddle.net/Skooljester/6Dk4D/1/ он работает, если вы укажете width в пикселях для зависания.

Изменить: если вы укажете первый width как процент, то второй может быть определен и с процентом, и все еще работать. Спасибо Тило

Ответ 2

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

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