28212 sujets

CSS et mise en forme, CSS3

Maximiser la taille d'une image (sous IE)

Bonjour à tous,

Voila, j'ai un petit problème que je n'arrive pas à résoudre seul, je me tourne donc vers vous pour essayer de trouver une solution. Merci d'avance de votre aide Smiley cligne


Problème:

J'ai crée une page html contenant 3 colonnes.
La colonne du milieu (en jaune) contient une image.
J'aimerais que cette image soit la plus grande possible,
c'est à dire de la taille maximum de ma div (en jaune).
Soit le maximum de la hauteur, soit le maximum de la largeur (pour les images paysage).
Mon code marche parfaitement sous FireFox, l'image s'adapte parfaitement
à ma div quand je redimensionne ma fenêtre.
Malheureusement sous Internet Explorer, mon image ne s'adapte pas à la hauteur de ma div.

Fire Fox
upload/13805-FFok.jpg

Internet Explorer
upload/13805-IEnok.jpg


Après m'être un peu informé, je découvre que IE ne tient
pas compte des propriétés "min" ou "max-height".
J'essaie donc de rajouter dans le css de mon image (height: 100%;).
Ca fonctionne pour IE, mais le problème est que quand je redimensionne ma fenêtre FF
sur la largeur, cela écrase l'image...Grrr... je sais plus quoi faire ^^.

upload/13805-FFnok.jpg



Quelqu'un connaîtrait-il une solution ?
-soit pour éviter que Firefox ne compresse mon image.
-soit pour hacker la propriété "min-height" sur IE

Merci d'avance Smiley smile 





<html>
<head>
<title>EPVS</title>

<style type="text/css" media="screen">

html, body {
padding:0px;
margin:0px;
}

body {
background-color: #121212;
font-size: 12px;
font-family: "Times New Roman", Times, serif;
color:#121212;
overflow: hidden;
}

#gauche {
left: 2%;
width: 23%;
background-color: #121212;
text-align: left;
min-width: 200px;
background-color: Aqua;
}

#milieu {
left: 25%;
width: 50%;
background-color: yellow;
text-align: center;
}

#milieu img {
max-height:100%;
max-width: 100%;
}

#droite {
left: 75%;
width: 23%;
background-color: Lime;
min-width: 200px;
}


#droite, #milieu, #gauche {
position: absolute;
padding:0px;
margin:0px;
top: 5%;
bottom: 5%;
height: 90%;
overflow: hidden;
}

p,h1, h3{
padding: 15px 15px;
margin: 0px;
}

</style>

</head>
<body>


		<div id="gauche">
			<h3>gauche</h3>
		</div>

		<div id="milieu">
			<img src="http://img192.imageshack.us/img192/8931/imageavb.jpg">
		</div>

		<div id="droite">
			<h3>droite</h3>
		</div>
</body>
</html>

Modifié par Natas (09 Jun 2009 - 18:11)
Bonjour Heyoan,

Je ne connaissais pas les "commentaires conditionnels", merci pour ta réponse
je vais désormais pouvoir faire une feuille de style uniquement pour IE.

Ca règle en partie mon problème, mais pas totalement malheureusement.

Je m'explique:
Lorsque je redimensionne ma fenêtre sous "FireFox,Opera,Safari", mon image au centre
s'adapte à ma "div jaune" en Hauteur et Largeur sans déformer les proportions de mon image.

Le problème est que sous Internet Explorer, je n'arrive pas au même résultat.

Sous FireFox (l'image s'adapte a mon bloc jaune lorsque je redimensionne ma page web).
upload/13805-FFlargeurO.jpg
upload/13805-13805-FFok.jpg


Sous Internet Explorer, même avec une feuille de style pour IE, je n'arrive pas à avoir le même résultat, cela marche pour la hauteur, mais pas en largeur.
upload/13805-IEhauteurO.jpg
upload/13805-IElargeurN.jpg


J'ai vu qu'il était possible d'utiliser du "Javascript" dans une feuille de style pour IE de cette manière:
propriété: expression( code JavaScript );

Malheureusement je ne connais rien en JavaScript,
et j'aurais préféré trouver une solution CSS.


Voici mon code pour Internet Explorer (marche seulement pour le redimensionnement vertical): 



<html>
<head>
<title>EPVS</title>


<style type="text/css" media="screen">

html, body {
padding:0px;
margin:0px;
}

body {
background-color: #121212;
font-size: 12px;
font-family: "Times New Roman", Times, serif;
color:#121212;
overflow: hidden;
}

#gauche {
left: 2%;
width: 23%;
background-color: #121212;
text-align: left;
background-color: Aqua;
}

#milieu {
left: 25%;
width: 50%;
background-color: yellow;
text-align: center;
overflow: hidden;
}

#milieu img {
height:100%;
}

#droite {
left: 75%;
width: 23%;
background-color: Lime;
}

#droite, #milieu, #gauche {
position: absolute;
padding:0px;
margin:0px;
top: 5%;
bottom: 5%;
height: 90%;
overflow: hidden;
}

p,h1, h3{
padding: 15px 15px;
margin: 0px;
}

</style>

</head>
<body>


		<div id="gauche">
			<h3>gauche</h3>
		</div>

		<div id="milieu">
			img src="http://img192.imageshack.us/img192/8931/imageavb.jpg">
		</div>

		<div id="droite">
			<h3>droite</h3>
		</div>
</body>
</html>

Modifié par Natas (09 Jun 2009 - 17:26)
Sujet clos
Aller à