图像宽度/高度过渡不起作用

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,则需要在orignal img样式中声明它.如下所示:http://jsfiddle.net/Skooljester/6Dk4D/1/如果width为悬停指定像素,则它可以工作.

编辑:如果您将第width一个指定为百分比,那么第二个也可以使用百分比定义并仍然有效.谢谢Tyilo