Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir la taille de l'image img en CSS

下次还敢
Libérer: 2024-04-26 11:48:13
original
577 Les gens l'ont consulté

Pour définir la taille de l'image en CSS, vous pouvez utiliser les attributs suivants : 1. width : Définissez la largeur de l'image. 2. hauteur : définissez la hauteur de l’image. 3. max-width et max-height : conservez les proportions de l'image.

Comment définir la taille de l'image img en CSS

Comment définir la taille de l'image en CSS

Afin de définir la taille d'une image en CSS, vous pouvez utiliser les propriétés suivantes :

  • width: Définissez la largeur de l'image.
  • hauteur : Définissez la hauteur de l'image.

Définir une taille fixe

Pour définir une image de taille fixe, vous pouvez utiliser respectivement les attributs largeur et hauteur : widthheight 属性:

<code class="css">img {
  width: 200px;
  height: 150px;
}</code>
Copier après la connexion

设置相对大小

您还可以使用百分比值来设置图片的相对大小,使其适应容器的大小:

<code class="css">img {
  width: 100%;
  height: auto;
}</code>
Copier après la connexion

保持图片宽高比

要保持图片的宽高比,可以使用 max-widthmax-height

<code class="css">img {
  max-width: 100%;
  max-height: 100%;
}</code>
Copier après la connexion

Définir la taille relative

Vous Vous pouvez également utiliser des valeurs de pourcentage pour définir la taille relative de l'image afin qu'elle corresponde à la taille du conteneur :

<code class="css">/* 设置固定大小的图片 */
img.fixed {
  width: 200px;
  height: 150px;
}

/* 设置相对大小的图片 */
img.relative {
  width: 100%;
  height: auto;
}

/* 保持图片宽高比 */
img.aspect-ratio {
  max-width: 100%;
  max-height: 100%;
}</code>
Copier après la connexion
🎜Préserver les proportions de l'image🎜🎜🎜Pour conserver les proportions de l'image, vous pouvez utiliser max-width et max-height : 🎜rrreee🎜🎜Exemple🎜🎜🎜L'exemple suivant montre comment utiliser ces propriétés pour définir des images de différentes tailles : 🎜rrreee

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal