web-dev-qa-db-ja.com

画像の幅/高さの遷移が機能しない

画像を拡大するときにトランジションを使用すると、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/

なにが問題ですか？

csscss-transitions
17
Tyilo

見かけのパーセンテージでは機能しません。また、heightも移行したい場合は、元のimgスタイルで宣言する必要があります。ここに示されています： http://jsfiddle.net/Skooljester/6Dk4D/1/ ホバーにwidthをピクセルで指定すると機能します。

編集：最初のwidthをパーセンテージとして指定すると、2番目もパーセンテージで定義でき、引き続き機能します。 ありがとうTyilo

24
ayyp

max-widthトリックを使用することもできます。ホバーに高いmax-width量を設定すると、元の画像の幅が遷移によって尊重されます。

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

1
RustyDev