Comment définir la taille de l'image CSS-tutoriel CSS-php.cn

Comment définir la taille de l'image CSS

coldplay.xixi

Libérer： 2023-01-05 16:12:28

original

45219 Les gens l'ont consulté

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.

Comment définir la taille de l'image CSS

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}

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

Rendu :

Comment définir la taille de limage CSS