largeur maximale (propriété CSS)

Description

Cette propriété définit la largeur de contenu maximale d'un bloc ou d'un élément remplacé. Cette largeur maximale n'inclut pas le rembourrage, les bordures ou les marges.

Un élément dans lequel une largeur maximale est appliquée ne sera jamais plus large que la valeur spécifiée même si la propriété de largeur est définie pour être plus large. Il y a une exception à cette règle, cependant: si la largeur min est spécifiée avec une valeur supérieure à celle de la largeur maximale, la largeur du conteneur sera la plus grande valeur, ce qui signifie que la valeur de la largeur minimale sera celle appliquée.

La largeur maximale est souvent utilisée en conjonction avec la largeur min pour produire une plage de largeur pour l'élément concerné.

combinant la largeur maximale et la largeur

Notez que la largeur maximale et la largeur ne doivent pas être appliquées au même élément en utilisant la même unité, car l'un remplacera l'autre. Si, par exemple, la largeur est définie sur 150px et que la largeur maximale est définie sur 60px, la largeur réelle de l'élément sera de 60px, et la déclaration de largeur deviendra redondante.

La règle de style suivante montre comment les conflits sont résolus lorsqu'un élément a reçu à la fois une largeur et une largeur maximale en utilisant la même unité (pixels dans ce cas):

.example {
  max-width: 60px;
  width: 150px;
}

Dans l'exemple ci-dessus, la largeur de l'élément sera fixée à 60px.

Cependant, il est acceptable de définir la largeur maximale et la largeur lorsque les valeurs sont des unités différentes (bien qu'elle ne soit pas entièrement utile, il y a quelques cas où il peut être utilisé avec bon effet).

Cette règle de style attribue une largeur maximale de 160px aux images avec l'exemple de classe, et attribue également une largeur de 50%:

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

La largeur finale de l'image dans l'exemple ci-dessus sera la plus petite valeur.

Si vous voulez qu'une image évolue lorsque la largeur de la page est petite, de sorte que l'image ne sort pas de sa colonne, vous pouvez utiliser l'exemple ci-dessus pour vous assurer que la taille de l'image diminue une fois que l'espace disponible est inférieur à 160 pixels.

Si l'espace disponible est supérieur à 160 pixels, l'image se développera jusqu'à ce qu'elle mesure 160 pixels de large, mais pas plus loin. Cela garantit que l'image reste à une taille sensée - ou son rapport d'aspect correct - lorsque l'espace le permet.

La propriété de la largeur min peut être utilisée pour l'inverse de ce scénario.

Si le contenu d'un bloc nécessite plus d'espace horizontal que ce qui est autorisé par les limites fixées, le comportement est défini par la propriété de débordement.

Exemple

Cette règle de style attribue une largeur maximale de 400 pixels et une largeur minimale de 100 pixels aux paragraphes dans l'élément avec ID "Exemple":

#example p {
  max-width: 400px;
  min-width: 100px;
}

valeur

La propriété prend une longueur CSS (PX, PT, EM, etc.), un pourcentage ou le mot-clé aucun. Les valeurs de longueur négatives sont illégales.

Les valeurs de pourcentage se réfèrent à la largeur du bloc contenu. Si la largeur du bloc contenant est négative, la valeur utilisée n'est aucune.

Questions fréquemment posées (FAQ) sur la propriété CSS max-largeur

Quelle est la différence entre la largeur et la largeur maximale dans CSS?

La propriété de largeur dans CSS définit une largeur spécifique pour un élément, tandis que la propriété max-largeur définit la largeur maximale à laquelle un élément peut s'étirer. Si le contenu à l'intérieur d'un élément est plus grand que le jeu de largeur maximale, il s'ajustera automatiquement à la valeur maximale. Cependant, si le contenu est plus petit, l'élément se rétrécira pour s'adapter au contenu, contrairement à la propriété de largeur qui maintient la largeur de la file d'attente, quelle que soit la taille du contenu.

Comment fonctionne la largeur maximale avec une conception réactive?

La largeur maximale est une propriété cruciale dans la conception sensible. Il permet à une page Web d'ajuster sa disposition en fonction de la taille de l'écran de l'appareil. En définissant une largeur maximale, vous vous assurez que sur des écrans plus grands, le contenu ne s'étendra pas au-delà d'un certain point, en maintenant la lisibilité et l'intégrité de la conception. Sur les écrans plus petits, le contenu s'adaptera pour s'adapter à la taille de l'écran.

Puis-je utiliser les valeurs de pourcentage avec la largeur maximale?

Oui, vous pouvez utiliser des valeurs de pourcentage avec la propriété maximale. Le pourcentage est relatif à la largeur de l'élément parent. Par exemple, si vous définissez la largeur maximale d'un élément à 50%, cela prendra jusqu'à la moitié de la largeur de l'élément parent.

Que se passe-t-il lorsque la largeur maximale et la largeur sont définies sur le même élément?

Lorsque la largeur et la largeur maximale sont définies sur le même élément, les plus petites des deux valeurs seront utilisées. Par exemple, si la largeur est définie sur 500px et que la largeur maximale est définie sur 400px, le navigateur utilisera la valeur 400px.

Comment l'interaction maximale interagit-elle avec la largeur minimale? Cependant, si la largeur maximale est plus petite que la largeur min, la valeur de la largeur min sera utilisée. Cela garantit que l'élément ne devient pas plus petit que la largeur minimale spécifiée.

peut être utilisée avec tous les éléments HTML? Il ne s'applique pas aux éléments en ligne ou aux lignes de table et aux groupes de lignes.

Comment fonctionne la largeur maximale avec les images?

Lorsqu'il est utilisé avec des images, la largeur maximale peut aider à maintenir le rapport d'aspect de l'image tout en l'empêchant de s'étirer au-delà d'un certain point. Ceci est particulièrement utile dans la conception réactive où la taille de l'image doit s'ajuster en fonction de la taille de l'écran.

La largeur maximale peut-elle remplacer la largeur définie dans HTML?

Oui, la largeur maximale de CSS remplacera la largeur définie dans HTML. En effet, CSS a une spécificité plus élevée que HTML.

Est-ce que la largeur maximale est prise en charge dans tous les navigateurs?

Oui, la largeur maximale est prise en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Internet Explorer 9 et supérieur.

Quelles unités peuvent être utilisées avec la largeur maximale?

La largeur maximale peut accepter plusieurs unités, y compris les pixels (PX), les EM (EM), les REM (REM), les pourcentages (%) et les unités de la fenêtre (VW, VH). Chaque unité a son propre cas d'utilisation et peut être utilisé en fonction des exigences spécifiques de votre conception.

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!