Css, lightbox & image adaptée à l'écran

Bonsoir à tous !

Je n'arrive pas à faire en sorte que mon imagee qui s'ouvre dans une lightbox s'adapte aux dimensions de mon écran

Voici le CSS :

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(pages/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(pages/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px "Lucida Sans Unicode", "Lucida Grande", sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


.galerie {
cursor:default;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.galerie li{
background-color:#ECECEC;
border:1px solid #888888;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
margin-bottom:10px;
margin-right:10px;
padding:16px 3px 4px;
text-align:center;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
	width:100px;
	}

J'ai essayé de modifier quelques trucs mais rien n'y change, mon image (qui fait 1500 px de large) ne s'adapte pas aux dimensions de mon écran (j'ai un 15 pouces)
Dans l'idée, j'aimerais que l'image s'affiche genre à 80%, pour qu'elle s'ajuste en fonction des écrans.

Avez vous THE solution ?

Merci pour votre aide !

Bonjour,

Moi, avec mon système perso j'obtiens ceci pour l'instant : Images (cliquez sur les images possédant la classe .figure-focus)

Le résultat est obtenu avec ce code (tout l'enjeux tourne autour des vh et wh units) :

img.MaClasse {
    width: initial;
    height: initial;
    max-width: 90wh;
    max-height: 90vh;
    margin: 0 auto;
}

Mais cela ne fonctionne parfaitement qu'avec Chrome pour l'instant (Firefox, ça dépend). Il faut moi aussi que j'améliore mon truc... du coup je vais suivre ce fil et je vais essayer de me pencher sur cette questions les jours prochains. Ce sera une bonne occasion de corriger les incompatibilités de mon code.