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

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

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

怎么了？

Answer 1

它似乎不适用于百分比。此外，如果您还希望转换 height，则需要在原始 img 样式中声明它。此处显示:http://jsfiddle.net/Skooljester/6Dk4D/1/如果您为悬停指定以像素为单位的宽度，它会起作用。

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