aiuto centramento immagine in box

Se stai imparando a costruirti il tuo template qui trovi consigli e risposte ai tuoi dubbi sull'HTML

Moderatori: Moderatori iobloggo, Moderatori HTML & Grafica

aiuto centramento immagine in box

Messaggioda ZioJack » 11 maggio 2012, 16:48

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
ZioJack
principiante
principiante
 
Messaggi: 2
Iscritto il: 11 maggio 2012, 16:38
Indirizzo blog: localhost per il momento

Re: aiuto centramento immagine in box

Messaggioda arunka » 11 maggio 2012, 18:14

Ciao,
questo è il forum di assistenza della piattaforma iobloggo :)
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: aiuto centramento immagine in box

Messaggioda ZioJack » 11 maggio 2012, 18:28

si questo lo sapevo, ma infatti vi ho posto un problema con la speranza di un aiuto lo stesso, tutto qui.
ZioJack
principiante
principiante
 
Messaggi: 2
Iscritto il: 11 maggio 2012, 16:38
Indirizzo blog: localhost per il momento

Re: aiuto centramento immagine in box

Messaggioda arunka » 11 maggio 2012, 18:57

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>
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: aiuto centramento immagine in box

Messaggioda arunka » 11 maggio 2012, 18:58

ps: questo è ciò che io farei qua su iobloggo. Altre piattaforme non ho idea di come funzionino.
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com


Torna a HTML, CSS e Javascript

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron