Limitar el tamaño seguna la resolucion del visitante

Hola, buenos dias, tengo desde hace 3 años una página web activa que funciona "casi" corectamente (entre otras cosas gracias a esta web y en espacial a Yaneth).
Ahora voy a hacer otra nueva con otros temas mas personales, ya que me dedico a la fotografia y quiero exponer mi portfolio.

Esto es un ejemplo de galeria de mi actual web:

http://icelost.onlinewebshop.net/albumes/lugares/almazan/index.htm

Ahí funciona correctamente la galeria (creo que era lightbox), el unico problema es que puse las fotos grandes lo suficientemente pequeñas para que se pudieran ver en cualquier monitor.

Ahora quiero poner imagenes mas grandes, y he oido que se puede poner el tamaño de la visualizacion por ejemplo a un 80 % de la pantalla en la que se vea, por que si la ajusto a mi monitor, el que tenga resolucion mayor o menor ya no la vera en la misma proporcion.

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

#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, 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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

Creo que este codigo es el que manda sobre toda la "ventanita".

Yo entiendo que esta al 100% por que la foto es pequeña, pero cuando ponga la imagen mas grande, y no quepa en la pantalla, no se que apartado (ni de que modo) tocar para que esta imagen se muestre siempre por ejemplo al 80 % de la pantalla y no al 80% del tamaño de la imagen.

Perdon por la parrafada, y muchas gracias, espero haberme explicado bien

Nadie me puede ayudar a poner el tamaño automáticamente????