web-dev-qa-db-ja.com

寸法を維持しながら画像にCSSのサイズ変更/ズームイン効果を適用

ロールオーバー効果にCSS3 scale()トランジションを使用したいのですが、ロールオーバー画像の寸法を同じに保ちたいです。そのため、画像は拡大されますが、既存の幅と高さに制限されたままになります。

img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

基本的なフィドルから始めましょう。

しかし、再び、私は画像が幅/高さを維持することを望みます。

私はcss3スケールの使用と結婚していません。たぶん、要素のサイズを変更するより良い方法があります。

htmlcsscss3rollover
20
mtyson

<div>で画像をラップし、その要素に overflow: hidden を追加するだけで、それを実現できます。

<div class="img-wrapper">
    <img src="..." />
</div>

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
}

WORKING DEMO。

また、<img>要素（他のインライン要素と同様）がbaselineデフォルトで。そして、は画像の下部に 4~5pxギャップがあります 。

その垂直方向のギャップは、g j p q yのようなディセンダーの予約スペースに属します。 vertical-align プロパティをbaseline以外の値で画像に追加することにより、配置の問題を修正できます。

さらに、ユーザーエクスペリエンスを向上させるために、 transition を画像に追加できます。

したがって、次のようになります。

.img-wrapper img {
    transition: all .2s ease;
    vertical-align: middle;
}

更新されたデモ.

42
Hashem Qolami