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

Answer 2

您还可以使用max-width技巧。在悬停上设置较高的max-width数量，转换会尊重原始图像宽度。

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

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

2 个答案: