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 . 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..."