aiuto centramento immagine in box

[ZioJack]

Salve a tutti ragazzi,

ho un problema che vorrei porvi e spero sappiate aiutarmi:

ho un div di dimensioni fisse, e vorrei al suo interno inserire un'immagine a dimensioni variabili, ma che sia centrata verticalmente e ritagliata dal blocco del div che ha la sua dimensione fissa.
c'è un modo per fare questo?

per il momento all'immagine ho applicato questo style .. text-align: center; width:100%; position: relative; overflow: hidden; bottom: 30%; ..così facendo riesco a far diventare la larghezza dell'immagine adattata alla dimensione del riquadro div fisso con style .. display: block; width: 520px; height:200px; overflow: hidden; .. però non riesco a far centrare le immagini correttamente in altezza in modo del tutto automatico senza agire ogni volta sul valore del "bottom: 30%", visto che vengono ritagliate per esubero di dimensione.

ora il problema specifico è:se ho immagini di altezze variabili e differenti tra loro, come faccio a farle centrarle nel div di ritaglio, in modo del tutto automatico senza che per ogni immagine mi devo impostare la % del bottom che varia differentemente purtroppo a seconda dell'altezza dell'immagine?

grazie in anticipo a tutti

[arunka]

Ciao,
questo è il forum di assistenza della piattaforma iobloggo

[ZioJack]

si questo lo sapevo, ma infatti vi ho posto un problema con la speranza di un aiuto lo stesso, tutto qui.

[arunka]

ok ok vediamo che possiamo fare.
innanzitutto quando scrivi del codice qua sul forum sarebbe bene tu lo includessi con il tasto "code" altrimenti l'editor si mangia un pochino di codice e non ci capisco nulla.
inoltre non ho proprio capito questo div chi è, cosa fa, e a cosa ti serve: non è che gentilmente mi incolli tutta la parte di codice relativa al div? non sono un'indovina (e a dire la verità, nemmeno una programmatrice, ma questo è un altro discorso)
comunque in generale io farei così:
parte del css

Codice: Seleziona tutto

.box
{
background-url: (url dell'immagine);
background-width: 90%;
background-position: center;
background-repeat: no repeat;
margin: auto;
width: tot px;
height:tot px;
}


dove tot va sostituito con la dimensione del div.
90% può anche essere una percentuale diversa, a seconda di quanto più piccola vuoi l'immagine.
nel resto del template il div va usato in questo modo:

Codice: Seleziona tutto

<div id="box"></div>

[arunka]

ps: questo è ciò che io farei qua su iobloggo. Altre piattaforme non ho idea di come funzionino.