Comment réaliser un agrandissement d'image avec CSS

Avec la popularité d'Internet et des appareils mobiles, les images dans les pages Web et les applications sont devenues un élément indispensable. Mais que devons-nous faire lorsque nous devons agrandir l’image dans une certaine mesure ? Cet article explique comment utiliser CSS pour obtenir l'effet d'agrandissement des images.

1. Concepts de base

Pour obtenir l'effet d'agrandissement des images, nous devons comprendre les deux propriétés CSS suivantes :

1. propriété transform : utilisée pour effectuer des opérations de transformation telles que la rotation, la mise à l'échelle et le mouvement des éléments.
2. Attribut de transition : utilisé pour définir l'effet de transition d'un élément d'un état à un autre, comme un fondu entrant et sortant, une rotation, etc.

2. Implémentation de base

1. Effet d'agrandissement

Ce qui suit est un simple extrait de code HTML, comprenant une image et un bouton :

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

Parmi eux, la classe de l'image est pic, et la fonction appelée par le bouton est agrandir( ). Ensuite, nous pouvons obtenir l'effet d'agrandissement de l'image via CSS :

    .pic {
        transition: all 0.3s;
    }

    .enlarge {
        transform: scale(1.5);
    }

Dans le style CSS de .pic, nous définissons un effet de transition de 0,3 seconde, afin qu'il y ait une transition douce lorsque l'image est agrandie. Dans la classe .enlarge, nous utilisons l'attribut transform et définissons le taux d'agrandissement de l'image à 1,5 fois. Il ne nous reste plus qu'à définir la fonction enlarge() en JavaScript et à la laisser ajouter la classe .enlarge à l'image lorsque l'on clique sur le bouton :

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

De cette façon, lorsque l'on clique sur le bouton, l'image sera agrandie. Si nous devons restaurer la taille de l'image, nous pouvons définir une fonction Shrink() en JavaScript et la laisser supprimer la classe .enlarge :

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

2. Agrandir et déplacer les effets

Si nous devons agrandir l'image, nous avons également besoin à Il effectue une opération de traduction, comment doit-il être mis en œuvre ? À ce stade, nous devons utiliser la fonction translate() dans transform. Voici un exemple de code :

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

Dans cet exemple, nous utilisons toujours la fonction scale() pour agrandir l'image, mais en même temps la combinons avec la fonction translate() pour déplacer l'image de 20 pixels vers le bas à droite. En utilisant cette méthode, nous pouvons facilement obtenir l’effet d’agrandissement et de mouvement d’images.

3. Cas pratiques

En plus de l'effet de grossissement de base, nous pouvons également combiner d'autres attributs CSS pour obtenir des effets d'image plus riches. Voici quelques cas pratiques :

1. Masque d'agrandissement d'image

Dans ce cas, nous utilisons des pseudo éléments pour obtenir un effet masque noir, puis plaçons l'image agrandie sous le masque pour créer un visuel sur l'effet. L'exemple de code est le suivant :

    <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);
    }

Dans le code ci-dessus, nous utilisons des pseudo-éléments pour créer des masques et obtenons l'effet de fondu du masque via l'attribut d'opacité. Pour l'opération d'agrandissement d'image, utilisez simplement l'attribut transform directement dans la pseudo-classe :hover. Enfin, nous devons définir le .wrapper sur inline-block afin que l'image et le masque s'alignent correctement.

2. Vignettes d'agrandissement d'image

Dans certains sites Web de commerce électronique, nous voyons souvent un ensemble de vignettes lorsque nous cliquons sur l'une des images, elle passe à une nouvelle page et affiche la version agrandie de l'image. Que se passe-t-il si nous souhaitons afficher une version agrandie de la page actuelle ?

Dans ce cas, nous pouvons ajouter une version agrandie de chaque vignette, puis utiliser CSS pour placer ces versions agrandies dans la même position afin d'obtenir l'effet d'agrandissement. L'exemple de code est le suivant :

    <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;
    }

Dans cet exemple, nous ajoutons l'attribut data-large à chaque vignette pour stocker la version agrandie correspondante. Ensuite, nous avons défini un élément .enlarge en HTML pour afficher l'image agrandie. En CSS, nous définissons le z-index de l'élément .enlarge sur -1 afin qu'il soit placé sous la vignette. Enfin, lorsque la vignette est survolée, nous pouvons placer la version agrandie correspondante à la même position pour obtenir l'effet d'agrandissement.

4. Résumé

Dans cet article, nous avons présenté comment utiliser CSS pour obtenir l'effet d'agrandissement de l'image. Qu'il s'agisse d'un élargissement et d'un mouvement de base, ou de cas plus riches, cela peut être facilement réalisé grâce aux attributs de transformation et de transition. J'espère que cet article pourra vous aider à obtenir de meilleurs résultats en matière de développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!