1485 sujets

Web Mobile et responsive web design

[Résolu] Attributes HTML width/height vs max-width/height CSS

Bonjour à tous,

je viens vers vous suite à un soucis concernant un conflit entre les attributs width/height d'une image inlinés dans le HTML et la propriété CSS
max-width: 100%;

combinée à
height: auto;


L'objectif est de pouvoir restreindre la largeur d'une image à la largeur de son contenant d'une part, d'autre part, d’optimiser le rendu en spécifiant les dimensions des images dans le HTML (comme recommandé notamment par PageSpeed Insights).

Mécaniquement, la combinaison des deux ne fonctionne pas puisque l'attribute HTML inline de height prévaut sur la règle CSS height: auto et donc la hauteur reste celle de l'image réelle tandis que la largeur est celle du contenant ce qui conduit à un tassement de l'image.

Avez-vous une idée de comment traiter ce problème ?

Merci.
Modifié par Olivier (03 Jan 2015 - 23:44)
Re,

j'ai essayé d'inliner 
style="max-width: 100%; height: auto;"

dans l'image, ce qui fonctionne comme attendu.

Par contre, j'aurai aimé éviter d'avoir à mettre ça directement dans le HTML, d'où ma question originale.
Modifié par Olivier (03 Jan 2015 - 23:44)
Administrateur
Olivier a écrit :
Mécaniquement, la combinaison des deux ne fonctionne pas puisque l'attribute HTML inline de height prévaut sur la règle CSS height: auto

Bonjour,

En fait non, la règle CSS "height: auto;" prévaut sur l'attribut HTML 'height="XXXpx', c'est justement fait pour l'écraser et il ne devrait pas y avoir d'exception puisque l'arbre CSS se construit après celui du DOM.
Si ce n'est pas le cas chez toi, ton problème est différent.

EDIT : tu as un exemple concret à fournir ?
Modifié par Raphael (04 Jan 2015 - 14:33)
Salut,

je vais essayer d'extraire le comportement observé dans un use case simple et isolé qui soit montrable, il s'agit d'un site familial personnel que je ne souhaite pas diffuser.

J'aurai du mal à faire ça en semaine et ce week end je ne suis pas dispo, ne pas s'étonner d'absence de réponse en attendant donc Smiley cligne je reviendrai vers vous quand ça sera dispo.

En tout cas ta réponse me surprend vu le comportement observé, je pensais que l'attribut HTML prévalait sur le CSS de la feuille de style.

Je ne me suis rendu compte de ça que sur mobile (Chrome 39+ Android 5.0.1), vu le faible espace en largeur, c'est peut être juste que je tombe dans le cas de la limite du max-width que je n'ai pas sur desktop ou peut être un problème sur le browser en question ? (surprenant)

<edit>
J'ai pris le temps d'extraire ce que je pensais être en cause de mon problème et effectivement pas de soucis ça correspond bien au comportement que tu décris.
Je vais donc voir ce qu'il y a en plus dans mon cas global pour modifier l'exemple jusqu'à reproduire le problème.
</edit>
Modifié par Olivier (05 Jan 2015 - 22:28)
J'ai raffiné jusqu'à reproduire le problème, une fois reproduit, j'ai enlevé toute règle CSS superflue finalement, je pensais qu'un sélecteur permettrait d'appliquer le
height: auto;

à mon image, mais non et c'était là le problème.

Merci de m'avoir aiguiller sur une autre piste que mon postulat de départ, j'aurai pu chercher longtemps Smiley cligne
Modérateur
sauf que comme height: auto écrase la valeur indiquée par la valeur naturelle de l'image, en terme de performance cela revient au même que de ne pas renseigner les attributs width et height.
Sujet clos
Aller à