Max-height et max-width - Propriétés CSS.

Description des propriétés.

Les propriétés physiques max-width et max-height.

Les deux propriétés max-width et max-height définissent les limites maximales pour les dimensions d'un élément. Elles sont prioritaires sur les propriétés width et height.

Ces deux propriétés sont intéressantes à combiner avec des dimensions exprimées en pourcentages. On obtient ainsi un élément qui s'adapte à la taille de l'écran mais qui reste dans des limites acceptables.

Voir également les propriétés min-width et min-height.

Les propriétés logiques max-block-size et max-inline-size.

Ces deux propriétés agissent en fonction du mode d'écriture de la langue de l'élément. Pour les langues latines max-inline-size est équivalente à max-width et max-block-size est équivalente à max-height.

Les propriété min-block-size et min-inline-size existent également.

Prise en charge du mode d'écriture et de la langue.

Les propriétés logiques max-inline-size et max-block-size ont le même rôle que les propriétés physiques max-width et max-height, sauf qu'elles prennent en compte la direction et le mode d'écriture, Ce qui donne les équivalences suivantes, en fonction de la langue.

Valeurs pour les propriétés max-width et max-height.

Les propriétés logiques max-block-size et max-inline-size ont une syntaxe identiques. Elles ne sont pas citées dans les exemples ci-après.

• max-height: auto; max-width: auto;

  Les dimensions maximales sont déterminées par le navigateur en fonction des valeurs attribuées à width et height.

• max-height: none; max-width: none;

  Aucune limite n'est fixée sur la hauteur ou sur la largeur de l'élément.

• max-height: 400px; max-width: 400px;

  Une limite est fixée pour les dimensions de l'élément. La valeur indiquée doit être une valeur positive, du type dimension. Voir les unités de dimension.

  S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions du parent, avec les conventions suivantes:

  1. max-width est calculé par rapport à la largeur de l'élément parent.
  2. max-height est calculé par rapport à la hauteur de l'élément parent, à condition que celle-ci soit spécifiée, sinon les pourcentages sont assimilés à auto.
• max-width: min-content; max-width: max-content; max-width: fit-content;

  Ces trois valeurs prédéfinies permettent d'ajuster la largeur minimale d'un élément en fonction de son contenu :

  • min-content : la dimension la plus petite qui n'oblige cependant pas à couper des mots mais en insérant autant de saut de ligne que nécessaire.
  • max-content : la dimension la plus grande, c'est à dire en insérant aucun retour à la ligne qui ne serait imposé dans le document.
  • fit-content : la dimension la plus grande qui soit compatible avec la place disponible.

  Pour des exemples de fonctionnement et des explications plus détaillées, reportez-vous à la description des valeurs min-content, max-content et fit-content.

• max-height: stretch; max-width: stretch;

  En attente de définition.

• max-height: initial; (none) max-height: inherit; max-height: revert; max-height: revertLayer; max-height: unset;

  max-width: initial; (none) max-width: inherit; max-width: revert; max-width: revertLayer; max-width: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Animation de la propriété max-width.

L'exemple est écrit pour la propriété max-width mais fonctionnerait bien sûr de la même façon pour l'une des propriétés max-height, max-block-size ou max-inline-size.

Il est assez rare d'animer ces propriétés car leur effet peut très bien être invisible sur l'écran si les dimensions réelles de l'élément ne dépassent pas les valeurs maximales.

Accéder à la propriété max-height par programme.

Modifier la valeur de max-height en Javascript.

Deux syntaxes Javascript permettent de modifier la valeur de max-height. La première utilise la notation habituelle en CSS : kebab-case pour le nom de la propriété (un tiret pour séparer les mots), et la deuxième utilise la notation plus courante en Javascript, en (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['max-height'] = '10rem'; // ou let el = document.getElementById('id'); el.style.maxHeight = '10rem';

Lire en Javascript la valeur de max-height.

Ce code récupère la valeur de max-height lorsque cette dernière a été initialisée dans l'attribut style de l'élément (donc dans le code HTML). La valeur affectée via un sélecteur CSS n'est pas prise en compte.

La valeur est renvoyée dans la même unité que celle utilisée pour la définir, dans l'attribut style.

let el = document.getElementById('id'); let value = el.style['max-height']; // ou let el = document.getElementById('id'); let value = el.style.maxHeight;

Lire la valeur calculée de max-height en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la résolution de la cascade des héritages. La valeur calculée est toujours définie : cela peut être une valeur affectée via l'attribut style dans le code HTML, une valeur affectée via un sélecteur CSS, une valeur héritée, ou encore la valeur initiale de la propriété.

Dans le cas de max-height, la hauteur maximale ou la largeur maximale sont retournées en pixels, quelque soit l'unité utilisée pour la définir (sauf les pourcentages).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('max-height');

Modifier la valeur de la propriété max-height avec JQuery.


$('#id').css('max-height', '10rem');
// ou
$('#id').css('maxHeight', '10rem');


Lire la valeur calculée de la propriété max-height avec JQuery.

La lecture de la propriété peut se faire avec les codes suivants. Comme en Javascript, la hauteur et la largeur maximales sont renvoyées en pixels ou en pourcentages.

let value = $('#id').css('max-height');

Démonstration.

Utilisez les boutons ci-dessous pour afficher la valeur appliquée pour le premier bouton, et la valeur calculée pour le deuxième bouton. La valeur calculée est intéressante pour voir comment est stockée (sérialisée) la valeur. On constate en particulier que les valeurs exprimées dans une autre unités que le pixels sont converties en pixels, sauf en ce qui concerne le pourcentage.

Compatibilité des navigateurs avec max-height.

Pas de problème de compatibilité sur les propriétés max-height et max-width, ni avec les propriétés logiques équivalentes. La valeur stretch est cependant encore mal reconnue (2024) et doit être utilisée avec précaution. Il en est de même pour la fonction fit-content(). Firefox   permet cependant d'activer cette possibilité en modifiant un flag (accéder aux flags sur Firefox).

Remarques :

(1) Depuis CSS2.1, Firefox applique max-height également aux tables.

(2) Utilise la valeur non standard -wekbit-fill-available.

(3) Désactivé par défaut. Peut être activé avec le flag layout.css.fit-content_function.enabled.

1

Propriétés
max-width
max-height

2

Propriétés
max-inline-size
max-block-size

3

Valeur
stretch

4

Fonction
fit-content()

Estimation de la prise en charge globale.

97%

96%

0%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

2

Edge

2

Opéra

1

2

Safari

Safari sur IOS

Androïd Brower

2

Chrome pour Androïd

2

Firefox pour Androïd

Samsung Internet

2

Firefox

1

3

Chrome

2

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété max-height

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Définition première des propriétés max-height et max-width.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction des propriétés logiques max-block-size et max-inline-size, qui s'adaptent au mode d'écriture de la langue.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 3

  Ajout des valeurs pour les propriétés max... : auto, min-content, max-content et de la fonction fit-content().
  

  27 Septembre 2012

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 4

  Pas de changement concernant les propriétés max-height et max-width, ni pour les propriétés logiques correspondantes.
  

  26 Mai 2020

  Document de travail.

  

  

  

Voir aussi, dans le même module que max-height

Les spécifications CSS éditées par le W3C sont organisées en modules. Les propriétés max-height et max-width font partie du module CSS Box Sizing Module, ainsi que les propriétés logiques max-inline-size et max-block-size. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :

Valeurs: