Maison  >  Article  >  interface Web  >  Comment réduire la taille des images avec CSS

Comment réduire la taille des images avec CSS

WBOY
WBOYoriginal
2021-11-25 16:17:0121427parcourir

Méthode : 1. Utilisez les attributs width et height pour réduire l'image, la syntaxe est "picture object {width: width; height: height;}" ; 2. Utilisez l'attribut "background-size" pour réduire l'image, la syntaxe est "objet image {fond" -taille : largeur et hauteur ;}".

Comment réduire la taille des images avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment réduire les images avec CSS

1. En CSS, nous pouvons définir la hauteur et la largeur de l'image via les attributs width et height pour définir la taille de l'image afin d'atteindre l'objectif de réduction de l'image.

Jetons un coup d'œil à travers un exemple. L'exemple est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .img{
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <p><strong>原始图片大小</strong></p> 
        <div><img  src="1118.02.png" alt="Comment réduire la taille des images avec CSS" ><br> 
    </div> 
        <br />
        <p><strong>通过CSS使图片缩小</strong></p> 
        <div>
            <img  src="1118.02.png" class="img" alt="Comment réduire la taille des images avec CSS" ><br> 
        </div>
        
    </body>
</html>

Résultat de sortie :

Comment réduire la taille des images avec CSS

2. En CSS, vous pouvez utiliser l'attribut background-size pour réduire l'image. regardez-le à travers un exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div{
                width: 400px;
                height: 320px;
            }
            .box1{
                background:url(1118.02.png) no-repeat;
            }
            .box2{
                background:url(1118.02.png) no-repeat;
                background-size: 200px 160px;
                
            }
        </style>
    </head>
    <body>
        <p><strong>原始图片大小</strong></p> 
        <div class="box1"></div> 
        <br />
        <p><strong>通过CSS缩小背景图片</strong></p> 
        <div class="box2"></div>
    </body>
</html>

Résultat de sortie :

Comment réduire la taille des images avec CSS

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn