Les propriétés physiques max-height et max-width.
Les propriétés logiques max-block-size et max-inline-size.
Résumé des caractéristiques de la propriété max-height
nonemax-height passe progressivement d'une valeur à une autre.Description des propriétés.
Les propriétés physiques min-height et max-height.
Les deux propriétés max-height et max-width 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-height et min-width.
Prise en charge du mode d'écriture et de la langue.
Les propriétés logiques max-block-size et max-inline-size ont le même rôle que les propriétés physiques
max-height et max-width, sauf qu'elles prennent en compte la direction et le mode d'écriture.
Ce qui donne les équivalences suivantes, en fonction de la langue.
<——— max-width ———><——— max-height ———>Syntaxes des propriétés définissant les dimensions maximales.
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.
- 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 CSS de dimension.
S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions du parent, avec les conventions suivantes:
max-widthest calculé par rapport à la largeur de l'élément parent.max-heightest 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 largeur la plus petite qui n'oblige cependant pas à couper des mots.max-content: la largeur la plus grande, c'est à dire en insérant aucun retour à la ligne qui ne serait imposé dans le document.fit-content: la largeur 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-contentetfit-content. - max-height:
initial; max-height:inherit; max-height:revert; max-height:revert-layer; max-height:unset;La valeur initiale est :
none
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.
Manipulation de la propriété max-height par programme.
Les exemples de code donnés ci-après sont donnés pour la propriété max-height ; ils seront facilement transposables pour max-width
ou pour une des propriétés logiques max-block-size et max-inline-size.
Ils agissent sur la valeur de max-height du bloc bleu ci-dessous.
Modifier la valeur de max-height en Javascript.
Deux syntaxes Javascript permettent de modifier la valeur de max-height.
La première utilise une notation en kebab-case pour le nom de la propriété (un tiret pour séparer les mots),
et la deuxième utilise la notation en camel-case (une majuscule pour séparer les mots).
function setMaxHeight(el) {
el.style['max-height']='1rem';
// ou
el.style.maxHeight='1rem';
}
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 dans l'attribut style.
function getMaxHeight(el) {
alert(el.style['max-height']);
// ou
alert(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.
function getCalcMaxHeight(el) {
alert(window.getComputedStyle(el).getPropertyValue('max-height'));
}
Modifier la valeur de la propriété max-height avec JQuery.
function setMaxHeight(el) {
$(el).css('max-height','1cm');
// ou
$(el).css('maxHeight','1cm');
}
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.
function getCalcMaxHeight(el) {
alert($(el).css('max-height'));
// ou
alert($(el).css('maxHeight'));
}
Prise en charge par les navigateurs (compatibilité).
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 sretch est cependant encore mal reconnue (2023) et doit être utilisée avec précaution.
stretch dans la syntaxe de ces propriétés.
fit-content() en tant que valeur de l'une des propriétés max-....
max-width
max-heightmax-inline-size
max-block-sizestretchfit-content()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que max-height.
Les spécifications CSS éditées par le W3C sont organisées en modules. max-height fait partie du Module CSS - Dimensionnement des blocs (CSS Box Sizing Module). Les définitions suivantes sont également décrites dans ce même module.