Centrare un'immagine in un box div

[timefinder1979]

Sto lavorando ad un sito per un book fotografico: qui la demo.
Lo slide in jQuery è costruito usando gruppi di foto le quali domensioni sono tali da essere identiche al box occupato.
Dato che ho intenzione di dare piena autonomia al mio "cliente" per non obbligarlo a ridimensionare a mano ogni immagine che aggiunge mi occorre poter impostare la posizione della foto nel singolo box in modo che venga centrata sia in orizzontale che in verticale anche se, nel caso l'immagine fosse più grande, si vede solo uan sua parte (in genere quella centrale dove c'è il soggetto principale della foto).

Il css relativo allo slide è questo:

* { margin: 0; padding: 0; }
.content { width: 990px; position: relative; }
span.reference { font-family: Arial; text-align: center; font-size: 10px; display: block; margin-top: 0px; }
span.reference a { color: #999; text-transform: uppercase; text-decoration: none; margin-right: 0px; }
.hs_container  { position: relative; width: 990px; height: 514px;  overflow: hidden;  clear: both; border: 0px solid #fff; cursor: pointer;  clip:  rect(auto,auto,auto,0px); }
.hs_container .hs_area { position: absolute; overflow: hidden; }
.hs_area img { position: absolute; top: 0px; left: 0px; display: none; }
.hs_area img.hs_visible { display: block; z-index: 9999; }
.hs_area1 { width: 492px; height: 364px; top: 0px; left: 0px; }
.hs_area2 { width: 494px; height: 179px; top: 0px; left: 494px; }
.hs_area3 { width: 494px; height: 183px; top: 181px; left: 494px; }
.hs_area4 { width: 210px; height: 148px; top: 366px; left: 0px; }
.hs_area5 { width: 776px; height: 148px; top: 366px; left: 212px; }

Il codice della pagina in cui compare lo slide jQuery è questo:

<div class="content">
      <div id="hs_container" class="hs_container">
        <div class="hs_area hs_area1">
          <img class="hs_visible" src="img/images/area1/1.jpg" alt=""/>
          <img src="img/images/area1/2.jpg" alt=""/>
          <img src="img/images/area1/3.jpg" alt=""/>
        </div>
        <div class="hs_area hs_area2">
          <img class="hs_visible" src="img/images/area2/1.jpg" alt=""/>
          <img src="img/images/area2/2.jpg" alt=""/>
          <img src="img/images/area2/3.jpg" alt=""/>
        </div>
        <div class="hs_area hs_area3">
          <img class="hs_visible" src="img/images/area3/1.jpg" alt=""/>
          <img src="img/images/area3/2.jpg" alt=""/>
          <img src="img/images/area3/3.jpg" alt=""/>
        </div>
        <div class="hs_area hs_area4">
          <img class="hs_visible" src="img/images/area4/1.jpg" alt=""/>
          <img src="img/images/area4/2.jpg" alt=""/>
          <img src="img/images/area4/3.jpg" alt=""/>
        </div>
        <div class="hs_area hs_area5">
          <img class="hs_visible" src="img/images/area5/1.jpg" alt=""/>
          <img src="img/images/area5/2.jpg" alt=""/>
          <img src="img/images/area5/3.jpg" alt=""/>
        </div>
      </div>
    </div>

Questo codice è fatto in modo che ogni gruppo di immagini (hs_area) ha le stesse dimensioni del box div che la ospita ma mi servirebbe che l'immagine venisse centrata sia in orizzontale che in verticale in ogni box a prescindere dalle dimensioni dell'immagine stessa.
Come devo modificarlo per ottenere ciò?

[timefinder1979]

Non c'è nessuno che sa aiutarmi?

[timefinder1979]

Grazie a tutti per l'aiuto....

[Nobody33]

Devi sapere che qui le cose vanno con calma. Se passa qualcuno e sa qualcosa ti risponde; altrimenti, se non sa un suggerimento/ soluzione come fa a risponderti? Quindi stai tranquillo ed armati con un po di pazienza .

Veniamo al tuo problema: centrare un immagine in orizzontale è abbastanza semplice:

#div img{
display:block;
margin:auto;
}

e la cosa è fatta.

Le cose si complicano parecchio quando si tratta di voler centrare un'immagine anche in verticale.
Non esiste una soluzione vera e propria, ma puoi sempre leggerti QUESTI suggerimenti per capirne qualcosa.

Ma nel tuo caso la vedo un po dura.

Forse converrebbe che ridimensioni l'immagine in automatico grazie al php, sempre se il tuo cliente carica le immagini grazie ad un CMS.