hola muy buenas a todos/as

tengu un div con un height en 100% i dentro de este una imagen. para empezar no puedo centrar este div i si pongo el div en 100% i centro la imagen centro del div, entonces la imagen no se redimensiona puesto que tambien esta en porcentaje.
tambien, el ancho del div contenedor no se adapta a la imagen que contiene. Si pongo el ancho en auto, se queda simplemente en 100%, es decir solo puedo controlar su ancho si pongo medidas estaticas.

llevo casi dos semanas con esto y no voy mejorando nada, estoy encallado y a punto de abandonar.
espero que alguien me pueda ayudar

aqui es dejo el condigo:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin t&iacute;tulo</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--

html, body {
background:#000;
height:100%;
max-height:100%;
width:auto;


}

a  {
   outline:0;
   outline:none;
   border:none;
}
 a img {
 padding:5px;
 
 }
 
#titDiv {

background: #000000;

padding: 10px;

}

 
#content {
   background-color: #000000;
   height:100%;
   width:500px;   
   
}


 


 

#layer1 {

position:relative;

top: 0%;

margin-top: -70px;



height:70px;

z-index:100;

background-image: url(../img/alpha.png);
background-repeat: repeat-x;

}

 

/* easy clearing */

 

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

 

.clearfix { display: inline-table; }

 

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

#center {
   position:relative;
   top: 15px;
   float: left;
   width: 200px;
   text-align: center;
   vertical-align: middle;
   margin-left:33%;
   
   
}

/*.numeros {
   margin-top: 0px;
   margin-bottom: 10px;
   margin-right: 0px;
   margin-left: 0px;
}*/

#right {
   position:relative;
   margin-right: 0px;
   float: right;
   top: 15px;
   padding:5px;
   
}
#left {
   position:relative;
   float: left;
   top: 15px;
   padding:5px;
   background-image: url(../img/img/fullScreen.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   height: 40px;
   width: 40px;
}

-->
</style>




</head>




<body>
<div id="content">

  <img  src="img.jpg"  height="100%" />
  <div id="layer1">

<a href="javascript:pantallacompleta('galeria_foto01G.html')"><div id="left" ></div>
</a>


<div id="center">
            <a href="#"><img src="img/img/botons_12.png" border="0"/></a>
                <a href="#"><img src="img/img/numeros/001-b.png" border="0" class="numeros" /></a>
                <img src="img/img/separador.png" class="numeros" />
                <a href="#"><img src="img/img/numeros/045.png" border="0" class="numeros" /></a>
            <a href="#"><img src="img/img/botons_14.png" border="0" /></a>           </div>

<div id="right" ><a href="../index.html" target="_self"><img src="img/img/contacte.png" border="0" /></a></div>
</div>
</div>


</body>
</html>