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

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