Comment définir la largeur et la hauteur de l'image en CSS

Les images jouent un rôle important dans la conception Web. Un réglage correct de la largeur et de la hauteur des images peut rendre la page Web plus belle et structurellement plus raisonnable. Alors, comment définir la largeur et la hauteur de l’image via CSS ?

Tout d'abord, vous devez faire attention aux points suivants lors de l'insertion d'images dans le code HTML :

1. Utilisez l'attribut alt : L'attribut alt est utilisé pour ajouter des descriptions textuelles aux images insérées. Si l'image ne parvient pas à se charger, l'attribut alt peut également aider les utilisateurs à comprendre le contenu de l'image.
2. Spécifiez la largeur et la hauteur de l'image : lors de la définition de la largeur et de la hauteur de l'image, vous pouvez utiliser les attributs de largeur et de hauteur de la balise HTML. Cependant, cette méthode est peu flexible et ne permet pas d’obtenir une conception réactive pour des appareils de différentes tailles.

Par conséquent, il est préférable d'utiliser la propriété CSS background-image et la propriété background-size pour définir la largeur et la hauteur de l'image. Voici quelques conseils CSS pratiques :

① Définissez une largeur et une hauteur fixes

Utilisez les attributs width et height en CSS pour définir la largeur et la hauteur fixes de l'image, comme indiqué ci-dessous :

.img{
  width: 300px; /*设置图片宽*/
  height: 200px; /*设置图片高*/
}

Bien sûr, cela peut aussi être défini de manière abrégée :

.img{
  width: 300px; height: 200px; /*用“；”隔开即可*/
}

② Adaptez la largeur et la hauteur en fonction du conteneur

Parfois, nous devons implémenter l'image pour adapter la largeur et la hauteur à mesure que la taille du conteneur change. À ce stade, vous pouvez utiliser l'attribut background-size en CSS et définir sa valeur sur « contain » ou « cover ».

« contenir » signifie que l'image est entièrement affichée, mais elle n'est peut-être pas assez large ou haute ;

« couvrir » signifie que l'image remplit le conteneur, mais nous ne pouvons pas garantir qu'elle soit entièrement affichée.

Comme indiqué ci-dessous :

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  background-size: contain; /*或者：background-size: cover;*/
}

③ Redimensionnez l'image proportionnellement

Afin de garantir que la proportion de l'image reste inchangée, nous pouvons définir un attribut "padding-top" avec une valeur de pourcentage. Il déterminera la hauteur de l'image en fonction de la largeur du conteneur parent, obtenant ainsi une mise à l'échelle proportionnelle.

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  padding-top: 50%; /*比例数值等于图片的高/宽*100% */
  background-size: cover; /*铺满背景容器*/
}

Ci-dessus sont trois façons courantes de définir la largeur et la hauteur des images CSS. Grâce à une utilisation flexible, nous pouvons facilement optimiser l’affichage des images dans la conception Web et améliorer l’expérience utilisateur.

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!