Sujet : [CSS] Problème avec max-width sur Safari et IE

Bonjour !

J'ai un petit souci de dimensionnement sur une image.

J'ai un bloc div à l'intérieur duquel se trouve une image. Ce bloc div à une certaine taille qui ne varie qu'avec la largeur de la fenêtre du navigateur. L'image qui se trouve dans ce div va recevoir des images de dimensions différentes : elles peuvent être soit plus grandes que le div, soit plus petites.

J'ai donc besoin que mon image se trouve toujours à l'intérieur du div et que ses dimensions soit toujours proportionnelles à celles du div.

J'ai donc placé une balise css pour mon image en définissant la propriété max-width à 95%. De cette façon, je m'assure que l'image aura une largeur au maximum égale à 95% de la largeur du div parent. Sous Firefox ça fonctionne sans problème, les images sont correctement ajustées.

Sous Safari et IE, le comportement est tout autre sad. Sous Safari, j'ai dû dire au div parent d'avoir une position: relative; pour forcer l'image à ne pas en sortir (sinon l'image n'avait que faire du max-width et sortait). L'image s'est donc bien dimensionnée mais uniquement en largeur !! La hauteur n'est pas ajustée automatiquement ! Je me retrouve donc avec des images dont les dimensions ne sont plus du tout proportionnelles...

Comment faire pour que mon image soit ajustée aussi en hauteur automatiquement sous Safari ?
(Pour IE, c'est encore autre chose, mais on verra plus tard. Chaque chose en son temps...)

Un peu de code pour illustrer :

// Code HTML
<div class="parent">
    <img src="#" class="image" alt="#" />
</div>

// Code CSS
.parent {
    margin-right: 3px;
    padding: 2px;
    position: relative;
    text-align: center;
}
.parent .image { max-width: 95%; }
-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : [CSS] Problème avec max-width sur Safari et IE

Pour IE tu peux tenter ça : (non testé)

<!--[if IE]>
<style type="text/css">
     .parent .image { width: expression(Math.min(this.width, 95%) + "px"); }
</style>
<![endif]-->

ou ca :

width:expression(this.width > 95% ? "95%" : "auto");

NB : il faut javascript :'(
NB2 : je ne suis pas sur que ça fonctionne avec des pourcentages...


Par contre je trouve ça assez logique qu'il ne touche que à la largeur de l'image ... car c'est ce que tu lui demande !!

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

Re : [CSS] Problème avec max-width sur Safari et IE

Et bien, oui c'est logique mais Firefox garde le ratio tout seul. Et faire des calculs de ratio en Css, moi je ne sais pas faire.

La solution que tu me donnes agit sur la propriété width or il faut définir height en fonction de width et du ratio de l'image wink (je n'ai pas testé ta solution donc je ne fais qu'emmettre une idée sur ce que je viens de lire).

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : [CSS] Problème avec max-width sur Safari et IE

La solution (si elle fonctionne) est juste pour simuler le max-width sur IE c'est tout. Mais si tu sais définir les valeurs width et height alors tu peux récupérer le ratio en analysant l'image.

L'inconvénient majeur est que tu confie tout au javascript ... et c'est pas top !

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

Re : [CSS] Problème avec max-width sur Safari et IE

Ca y'est, j'ai réussi à faire un hack IE pour simuler un max-width en pourcentage de la taille de l'élément parent :

// Code HTML
<div id="parent">
    <img src="#" id="image" alt="#" />
</div>

// Code CSS
#parent {
    ...
    width: 100%;
}

#parent #image { 
    width: expression(
                ( document.images["image"].width >= parseInt(document.getElementById("parent").offsetWidth * 0.95) ) ?
                parseInt(document.getElementById("parent").offsetWidth * 0.95) + "px" :
                "auto"
            );
}

Ce code permet donc de dimensionner l'image à 95% de la taille du bloc dans lequel elle se trouve.

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW