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