Max-width:100% sur img dans IE9

Bonjour,
le max-width:100% ne redimensionne (seulement lorsqu'il s'agit de diminuer la largeur pour être exacte) visiblement pas une image selon la largeur de son conteneur sous IE9 contrairement aux versions précédentes.
C'est quand même étonnant cette régression.
Quelqu'un connait une méthode pour y remédier (à part celle d'attribuer une largeur fixe) ?
Modifié par Hermann (03 Jul 2012 - 11:19)

Bonjour,

aurais-tu un exemple sur lequel se défouler ? J'avoue avoir la flemme d'en créer / chercher un.

D'après ce que tu décris, une propriété comme box-sizing pourrait te permettre d'affiner ce comportement, non ?

Ten a écrit :
Bonjour,

aurais-tu un exemple sur lequel se défouler ? J'avoue avoir la flemme d'en créer / chercher un.

D'après ce que tu décris, une propriété comme box-sizing pourrait te permettre d'affiner ce comportement, non ?

Sur ce site par exemple, alto-expertise.com/qui-sommes-nous , image du haut (sous le titre présentation)
Box-sizing n'est pas trop fait pour ça.
Modifié par Hermann (03 Jul 2012 - 12:10)

Pas pu inspecter l'image ou le code en question, car le site bloque le clic droit.
(Bon, après avoir cliqué cinq fois sans comprendre et m'être demandé si mon navigateur ou mon OS buguait, j'aurais pu utiliser un autre moyen pour lancer Firebug. Mais par principe, si un site bloque le clic droit ou comment ce genre de bêtise, je passe mon chemin. )

J'ai inspecté malgré ça le site, il n'y a aucun max-width appliqué...

De plus, box-sizing est précisément fait pour gérer les problèmes modèle de boite - ce à quoi tu sembles confronté.

Accessoirement, une mise en page en tableau ( ) ne nécessite à priori pas de gérer les débordements de contenus, puisque le tableau s'en charge.

Encore une fois, je n'ai pas vu la moindre de max-width, pourrais-tu être plus précis sur ton problème ? Je serais ravi d'aider, mais à l'affichage ce site semble correct, y compris sur IE9.

S'il y a une image en max-width:100% dans une cellule de tableau, rien d'étonnant. L'algorithme par défaut de calcul des dimensions d'un tableau prend en compte le contenu de chaque cellule. Du coup la cellule s'adapte à la largeur de l'image, et l'image ne fait donc pas plus de 100% de la largeur de la cellule.

Ne pas faire de mise en page en tableau ou bien utiliser table-layout:fixed.

fvsch a écrit :
Pas pu inspecter l'image ou le code en question, car le site bloque le clic droit.
(Bon, après avoir cliqué cinq fois sans comprendre et m'être demandé si mon navigateur ou mon OS buguait, j'aurais pu utiliser un autre moyen pour lancer Firebug. Mais par principe, si un site bloque le clic droit ou comment ce genre de bêtise, je passe mon chemin. )

Lol oui je sais c'est très pénible, j'ai expliqué ça à mon client. Il suffit de virer l'évenement JS sur le body dans Firebug.

 @Ten
Pardon j'ai pas été assez explicite : le code actuel ne correspond pas à ce que j'ai intégré mais c'est bien sur l'image en question que je souhaite l'appliquer sachant que la nouvelle largeur (zone de contenu) sera moins large qu'elle ne l'est actuellement.

fvsch a écrit :
S'il y a une image en max-width:100% dans une cellule de tableau, rien d'étonnant. L'algorithme par défaut de calcul des dimensions d'un tableau prend en compte le contenu de chaque cellule. Du coup la cellule s'adapte à la largeur de l'image, et l'image ne fait donc pas plus de 100% de la largeur de la cellule.

Ne pas faire de mise en page en tableau ou bien utiliser table-layout:fixed.

Ok merci je vais tester, au final il n'y a pas de tableau mais les blocs sont
en table-cell, ce qui revient au même.
Modifié par Hermann (03 Jul 2012 - 13:18)

Ha ok !! Forcément, je pouvais chercher longtemps ><

Bonne continuation alors, j'ai l'impression que tu touches au but !

fvsch a écrit :
S'il y a une image en max-width:100% dans une cellule de tableau, rien d'étonnant. L'algorithme par défaut de calcul des dimensions d'un tableau prend en compte le contenu de chaque cellule. Du coup la cellule s'adapte à la largeur de l'image, et l'image ne fait donc pas plus de 100% de la largeur de la cellule.

Ne pas faire de mise en page en tableau ou bien utiliser table-layout:fixed.

C'était bien vu et j'avais pas pensé au conteneur mais même si ça devrait fonctionner en théorie, IE9 ne réduit pas la largeur du conteneur à la largeur fixée.
En remplaçant table-cell par inline-block, la largeur se réduit en revanche, ça vient donc bien de table-cell.

Tant pis, je vais fixer la largeur en CSS pour IE.

Merci quand même.

Hello,

http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html#table

Raphael a écrit :
Hello,

http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html#table

Merci, c'est la solution que m'a conseillé Florent mais ça n'y a rien fait.
Ce qui est bizarre c'est que ça fonctionne sur ton exemple et pas dans mon cas.