CSS La propriété max-width

La propriété CSS max-width

La max-width définit la largeur maximale d'un élément.

Cette propriété empêche la largeur de l'élément d'être supérieure à la valeur spécifiée (elle peut être plus petite, mais pas plus grande).

Cette propriété est utile pour créer des mises en page réactives et garantir la lisibilité du contenu sur différentes tailles d'écran.

Problème avec la largeur :

Ici, nous avons un élément <div> centré horizontalement avec une largeur spécifique (600px) :

Que se passe-t-il avec le <div> ci-dessus si la fenêtre du navigateur est plus petite que la largeur de l'élément ? Une partie du contenu ne s'affichera pas, et le navigateur pourrait ajouter une barre de défilement horizontale à la page.

Utiliser max-width à la place :

Maintenant, nous utilisons la propriété max-width à la place. Cela améliorera la gestion des petites fenêtres par le navigateur :

Astuce : Redimensionnez la fenêtre du navigateur à moins de 600px de large pour voir la différence entre les deux <div>s !

Voici le code CSS pour les deux <div>s ci-dessus :

Propriétés CSS