28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Bon, je viens vers vous pour un problème pour lequel, pour une fois, je n'ai pas trouvé de solution ou de hacks.
Voilà, j'affiche des photos (en ligne) en les adaptant à la hauteur de la fenêtre du navigateur et donc de la résolution écran.
Donc en positionnement absolu, avec entre autres les propriétés suivantes sur la balise img, ca fonctionne sans problème:
img {
height:100%;
width: auto;
}
MAIS,pour limiter la hauteur maximale des photos affichés, j'ai ajouté un :
max-height : 500px;

Et là étrangement, sous ie8 et ie9, un problème de déformation de la photo apparait alors...celle-ci ne conserve pas un ratio cohérent et elle s'étends en largeur. Aucun problème sous Safari ou Firefox.

Avez vous connaissance de ce problème ?
Avez-vous une solution pour empêcher cette déformation de l'image sous ie8+, tout en conservant l'intérêt de ce code CSS: pouvoir ajuster la taille de la photo automatiquement à l'écran ?
Je sêche depuis plusieurs jours...

Merci par avance pour votre aide.


:::: CSS ::::

#photos {
position : absolute;
width: 100%;
top : 40px;
bottom : 60px;
text-align: left;
white-space: nowrap;
background-color: #ffffff;
padding:2px;
}

.image {
height : 100%;
margin : 0;
padding : 0;
display : inline;
position: relative;
}

.image img {
height: 100%;
width: auto;
max-height:500px; /* pose un problème de scaling sous ie8 et ie9 */
-ms-interpolation-mode:bicubic;
}

:::: HTML ::::

<div id="photos">
<div class="image"><img src="./image.jpg"></div>
<div class="image"><img src="./image.jpg"></div>
<div class="image"><img src="./image.jpg"></div>
<div class="image"><img src="./image.jpg"></div>
</div>
50 visites sur ce post et pas de réponse...
J'ai trouvé une solution pour ie8 et +, en récupérant dynamiquement le max-width sur chaque image (via php et getimageSize) et en appliquant le javascript:
document.getelementById("img_i").style.maxWidth=width_i.

Ainsi, avec un max-height et un max-width, plus de déformation (image étireé) sous ie.
Si celà peux aider...ou si d'autres solutions sont proposées...