Comment empêcher les images de s'étirer en CSS

La technologie CSS joue un rôle très important dans la conception Web. Grâce à CSS, nous pouvons non seulement contrôler tous les aspects du style des pages Web, mais également obtenir de nombreux effets de page Web magnifiques, ordonnés et entièrement fonctionnels. Parmi elles, l’affichage et le contrôle des images sont l’une des technologies qui nous préoccupent le plus et que nous devons maîtriser. Dans de nombreux cas, nous devons faire en sorte que les images apparaissent conformément aux exigences de conception sur la page Web, plutôt que d'être étirées ou compressées. Dans ce cas, nous devons utiliser la technologie CSS pour y parvenir.

Tout d'abord, nous devons comprendre quelques concepts de base liés à la taille des images : l'espace occupé par les images dans une page Web a deux dimensions, à savoir la largeur et la hauteur. Par conséquent, nous devons définir les attributs de largeur et de hauteur de l'image. En CSS, ces deux attributs correspondent respectivement à la largeur et à la hauteur.

Par exemple, nous pouvons utiliser le code CSS suivant pour rendre la largeur de l'image à 300 px et la hauteur à 200 px :

img{
    width: 300px;
    height: 200px;
}

Le code ci-dessus peut être appliqué à toutes les balises img, en définissant leur largeur et leur hauteur sur 300 px et 200 px. L'effet est que quelle que soit la taille réelle de l'image, elle sera étirée ou compressée à 300 px et 200 px dans la page Web.

Cependant, dans de nombreux cas, nous ne souhaitons pas que l'image soit étirée ou compressée, mais qu'elle conserve ses proportions et dimensions d'origine. À ce stade, nous devons utiliser différentes méthodes.

La première méthode consiste à définir la largeur maximale et la hauteur maximale de l'image. L'effet de ceci est que si la taille de l'image est inférieure à la largeur et à la hauteur maximales, elle sera alors rendue selon la taille d'origine. Si la taille de l'image est supérieure à la largeur et à la hauteur maximales, alors ; il sera réduit proportionnellement jusqu'à ce qu'il corresponde à la largeur maximale et à la hauteur maximale jusqu'à la hauteur maximale.

Par exemple, nous pouvons définir la largeur maximale de l'image à 300 px et la hauteur maximale à 200 px via le code CSS suivant :

img{
    max-width: 300px;
    max-height: 200px;
}

Le code ci-dessus garantira que quelle que soit la taille réelle de l'image, elle sera ne pas être étiré ou comprimé, mais conserve ses proportions et dimensions d'origine tout en s'adaptant à la largeur maximale et à la hauteur maximale.

La deuxième méthode consiste à définir la taille de l'image sur adaptative. Cela a pour effet que la taille de l'image sera automatiquement ajustée en fonction de la taille du conteneur dans lequel elle se trouve, en gardant la proportion inchangée.

Par exemple, nous pouvons définir la largeur et la hauteur de l'image à 100% via le code CSS suivant :

img{
    width: 100%;
    height: auto;
}

Dans le code ci-dessus, nous définissons la largeur à 100% et la hauteur à auto, ce qui signifie que la largeur de l'image sera basée sur la largeur du conteneur sera automatiquement ajustée et la hauteur sera automatiquement calculée en fonction du changement de largeur pour conserver les proportions d'origine inchangées.

Pour résumer, lorsque nous devons contrôler la taille d'une image, nous devons donner la priorité à l'utilisation des attributs de largeur maximale et de hauteur maximale, ou à définir la taille sur adaptative. Ces méthodes peuvent garantir que l'effet d'affichage de l'image n'est pas affecté par l'étirement et la compression, tout en conservant les proportions et la taille d'origine, rendant l'affichage de la page Web plus beau et plus confortable.

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!