Maison > Article > interface Web > Comment définir la taille de l'image CSS
Comment définir la taille de l'image CSS
- coldplay.xixioriginal
- 2021-04-28 15:58:3145091parcourir
Comment définir la taille de l'image CSS : 1. Paramètre de taille de l'image introduit via la balise img, la syntaxe est [img{width:150px;height:60px}] 2. Utilisez le [background-size] ; attribut pour spécifier l'arrière-plan. La taille de l'image.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.
Comment définir la taille de l'image CSS :
1. Paramètres de taille de l'image introduits via la balise img
Nous pouvons Définissez directement la largeur et la hauteur dans la balise d'image. Il convient de noter ici que la définition directe des valeurs de largeur et de hauteur dans la balise HTML img ne nécessite pas d'unités html. La valeur par défaut est PX pixels.
L'avantage de définir la hauteur et la largeur dans la balise img est intuitif. Pour insérer des images dans des articles, vous pouvez utiliser cette méthode pour contrôler la hauteur et la largeur de l'image. L'inconvénient est que si la liste d'images est affichée. est formaté comme ceci, beaucoup de code HTML sera ajouté, ce qui rendra difficile une modification uniforme.
css settings img image size syntax:
img{width:150px;height:60px}Ici, définissez la largeur CSS sur 150px et la hauteur CSS sur 60px Notez que les valeursde largeur CSS et de hauteur CSS sont dans. le style CSS comporte des unités, alors n'oubliez pas d'apporter votre unité avec vous lorsque vous vivez.
Si nous définissons le style directement sur img, cela contrôlera la largeur et la hauteur de l'image dans toute la page Web. Afin de contrôler le style de largeur et de hauteur de l'image dans l'objet spécifié, nous ajoutons généralement le nom CSS de l'objet avant img.
2. Définissez la taille de l'image d'arrière-plan avec CSS :
L'attribut background-size spécifie la taille de l'image d'arrière-plan.
Syntaxe :
background-size: length|percentage|cover|contain;
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
</body>
</html>Rendu :
Recommandations de tutoriel associées : 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!