CSSで画像を拡大する方法

インターネットとモバイルデバイスの普及により、Web ページやアプリの画像は不可欠な要素になりました。しかし、ある程度画像を拡大したい場合はどうすればよいでしょうか？この記事ではCSSを使って画像の拡大効果を実現する方法を紹介します。

1. 基本概念

画像の拡大効果を実現するには、次の 2 つの CSS プロパティを理解する必要があります:

1. transform プロパティ: 要素の回転に使用されます。 、拡大縮小、移動、その他の変換操作。
2. Transition 属性: フェードインとフェードアウト、回転など、ある状態から別の状態への要素の遷移効果を定義するために使用されます。

2. 基本的な実装

1. 拡大効果

次は、画像とボタンを含む簡単な HTML コード スニペットです。 ##

    <img src="sample.jpg" class="pic" />
    <button onclick="enlarge()">Enlarge</button>

このうち、画像のクラスは pic 、ボタンで呼び出される関数は extend() です。次に、CSS を使用して画像の拡大効果を実現します。

    .pic {
        transition: all 0.3s;
    }

    .enlarge {
        transform: scale(1.5);
    }

.pic の CSS スタイルで、0.3 秒のトランジション効果を定義します。これにより、画像が拡大されたときにスムーズなトランジションが行われます。拡大されたトランジション。 .enlargeクラスではtransform属性を使用し、画像の拡大率を1.5倍に設定しています。ここで必要なのは、JavaScript で extend() 関数を定義し、ボタンがクリックされたときに .enlarge クラスを画像に追加することだけです。

    function enlarge() {
        document.querySelector('.pic').classList.add('enlarge');
    }

このようにして、ボタンをクリックすると、画像が拡大されます。画像サイズを復元する必要がある場合は、JavaScript で shrin() 関数を定義し、.enlarge クラスを削除させます。

    function shrink() {
        document.querySelector('.pic').classList.remove('enlarge');
    }

効果の拡大と移動

画像を拡大し、同時に翻訳操作を実行する必要がある場合、どうやってそれを実現すればよいでしょうか?このとき、transformでtranslate()関数を使用する必要があります。以下はサンプルコードです:

    .move {
        transform: scale(1.5) translate(20px, 20px);
    }

この例では、引き続きscale()関数を使用して画像を拡大しますが、同時にtranslate()関数と組み合わせて画像を20ピクセル移動します。右下へ。この方法を使用すると、写真を拡大したり動かしたりする効果を簡単に実現できます。

3. 実践的なケース

基本的な増幅効果に加えて、他の CSS 属性を組み合わせて、より豊かな画像効果を実現することもできます。いくつかの実際的なケースを次に示します。

画像拡大マスク

この場合、擬似要素を使用してブラック マスク効果を実現し、画像を拡大します。マスクの下に置いて視覚効果を生み出します。サンプル コードは次のとおりです。

    <div class="wrapper">
        <img src="sample.jpg" class="pic" />
        <div class="mask"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .pic {
        transition: all 0.3s;
        display: block;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .wrapper:hover .mask {
        opacity: 1;
    }

    .wrapper:hover .pic {
        transform: scale(1.2);
    }

上記のコードでは、疑似要素を使用してマスクを作成し、不透明度属性を通じてマスクのフェード効果を実現します。画像の拡大操作には、:hover 疑似クラスで直接、transform 属性を使用します。最後に、画像とマスクが正しく並ぶように、.wrapper を inline-block に設定する必要があります。

画像拡大サムネイル

一部の電子商取引 Web サイトでは、一連のサムネイルがよく表示されます。画像の 1 つをクリックすると、次の画像にジャンプします。新しいページには画像の大きなバージョンが表示されます。現在のページを拡大して表示したい場合はどうすればよいでしょうか?

この場合、各サムネイルの拡大バージョンを追加し、CSS を使用してこれらの拡大バージョンを同じ位置に配置して、拡大効果を実現できます。サンプル コードは次のとおりです。

    <div class="wrapper">
        <img src="thumb1.jpg" class="thumbnail" data-large="large1.jpg" />
        <img src="thumb2.jpg" class="thumbnail" data-large="large2.jpg" />
        <img src="thumb3.jpg" class="thumbnail" data-large="large3.jpg" />
        <img src="thumb4.jpg" class="thumbnail" data-large="large4.jpg" />

        <div class="enlarge"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .thumbnail {
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .enlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s;
        z-index: -1;
    }

    .thumbnail:hover + .enlarge {
        transform: scale(1.5);
        opacity: 1;
        z-index: 1;
    }

この例では、各サムネイルに data-large 属性を追加して、対応する拡大バージョンを保存します。次に、拡大画像を表示するための .enlarge 要素を HTML に定義しました。 CSS では、.enlarge 要素の z-index を -1 に設定して、サムネイルの下に配置されるようにします。最後に、サムネイルをホバーすると、対応する拡大バージョンを同じ位置に配置して、拡大効果を実現できます。

4. まとめ

この記事では、CSS を使用して画像の拡大効果を実現する方法を紹介しました。基本的な拡大や移動であっても、よりリッチなケースであっても、transform 属性とtransition 属性を使用して簡単に実現できます。この記事が、Web 開発でより良い結果を達成するのに役立つことを願っています。

以上がCSSで画像を拡大する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。