Pagina 1 di 1

aiuto centramento immagine in box

MessaggioInviato: 11 maggio 2012, 16:48
da 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

Re: aiuto centramento immagine in box

MessaggioInviato: 11 maggio 2012, 18:14
da arunka
Ciao,
questo è il forum di assistenza della piattaforma iobloggo :)

Re: aiuto centramento immagine in box

MessaggioInviato: 11 maggio 2012, 18:28
da ZioJack
si questo lo sapevo, ma infatti vi ho posto un problema con la speranza di un aiuto lo stesso, tutto qui.

Re: aiuto centramento immagine in box

MessaggioInviato: 11 maggio 2012, 18:57
da 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>

Re: aiuto centramento immagine in box

MessaggioInviato: 11 maggio 2012, 18:58
da arunka
ps: questo è ciò che io farei qua su iobloggo. Altre piattaforme non ho idea di come funzionino.