Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    CSS e Worpress ... aiuto centramento immagine in box

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, se adoperi CSS3 puoi risolvere in modo semplice. Imposti l'immagine come background di un div a cui hai assegnato le dimensioni che desideri, quindi centri il background e specifichi la proprietà background-size (solo CSS3) al 100% in modo che la larghezza si porti alle dimensioni del div.

    codice:
    <div style="width:520px;height:200px;background: url(image.jpg) center center no-repeat;background-size:100%"></div>
    Con CSS2 la cosa non è così semplice, ho dato uno sguardo in giro ma non ho trovato soluzioni efficienti. Se ti serve una soluzione retrocompatibile potresti, secondo me, posizionare l'immagine con qualche semplice riga di javascript (in tal caso chiedi sul relativo forum).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.