Centrare immagine scalata automaticamente

**oreZ** · 28-11-2009, 18:09

Salve a tutti,
sono nuovo qui e sono anche nuovo al mondo dei css.
Son due mesi ormai che ci sbatto la testa (sia su questa cosa in particolare sia sui css in generale).
Vi illustro in breve il mio problema:
Ho creato una pagina il cui contenuto è soltanto una immagine molto grande. I miei obiettivi sono sostanzialmente due:
1) farla scalare automaticamente;
2) farla stare al centro della finestra.

Il primo obiettivo l'ho raggiunto impostando la seguente classe che svolge il suo lavoro a metà:

.scale {
position: absolute;
max-height: 100%;
width: auto; /*non credo sia necessario, ma meglio essere pignoli*/
}

applicata all'immagine come segue: [img]immagine.jpg[/img]
Lo svolge a metà inquanto scala solo se modifico il browser in altezza. Ovviamente scambiando height e width nella classe appena scritta ottengo il ridimensionamento in larghezza ma siccome la mia immagine ha come dimensioni minori l'altezza ho optato per il male minore. Sarebbe stupendo se si potesse scalare in altezza o in larghezza un po' come fa ad esempio firefox quando si visualizza solo una immagine molto grande e la si autoridimensiona in modo che sia completamente visibile nella finestra aprte (ma con i css non ci riesco).
Per il secondo obiettivo non so come procedere, le ho provate tutte quelle che mi son venute in mente. text-align; margin-left:50%; div una dentro l'altra; una immagine nascosta delle stesse dimensioni di quella originale, riscalata e il cui margine sinistro è posto a metà pagina in modo tale da rendere "conosciute" le dimensioni alla div figlia contenente l'immagine da visualizzare e con il margine sinistro posto a -50% (ho provato anche con diverse percentuali) ma nuuulla!

Leggendo un post su un argomento simile ho ituito che queste operazioni che vorrei fare non sono possibili con i soli css, non avendo io una dimensione conosciuta. Ora vi domando, posso sfissarmi con i css? Oppure la soluzione c'è? Se sì, mi dareste qualche input gentilmente? Se la risposta è no, quale via mi consigliate? Javascript?
Vi ringrazio in anticipo,
oreZ.

**ricman** · 30-11-2009, 10:18

Originariamente inviato da oreZ
1) farla scalare automaticamente;
2) farla stare al centro della finestra.

1) Non userei le position:absolute, di solito prodcono un po' di casino (forse nel tuo caso no, dato che hai una pagina con un solo oggetto...). E perchè hai usato max-height invece di height?

2) basta che al tag che contiene la img associ un "text-align:center"

**Mich_** · 30-11-2009, 10:18

Con i CSS da soli non si puo` fare tutto quanto chiedi. Occorre un minimo di JS.
Pero` dato che JS potrebbe non essere supportato nel brwoser dell'utente, occorre prima fare tutto il possibile con i CSS, poi eventualmente raffinare la cosa tramite JS.

Per centrare ci sono essenzialmente due metodi
- con il posiziamento assoluto (occorre conoscere le dimensioni dell'oggetto da centrare)
- con i margini automatici (solo centratura orizzontale)

Dato che la tua altezza e` il 100%, non occorre centrare in vert, per cui potresti usare i margini:

Quindi il tuo codice potrebbe diventare:

codice:

HTML:
<body>
  <div>
    [img]immagine.jpg[/img]
  </div>
</body>


CSS:
html, body, div {
  width: 100%;       /* necessari per dare significato a margini e dimensioni interne */
  height: 100%;   
}
img {
  height: 100%;     /* questo scala in modo automatico la largh, mantenendo le proporzioni */
  display: block;     /* altrimenti non si puo` centrare */
  margin: 0 auto;
}

Prova cosi` e dimmi come ti sembra.

**oreZ** · 06-12-2009, 16:38

Grazie per le risposte e scusate per il ritardo con cui vi scrivo, ma purtroppo posso lavorare ai miei progetti personali solo nei finesettimana.
Dunque rispondo in ordine.
@ricman:
ho impostato max-height:100%; perchè credevo fosse più corretto, cambiandolo in height non cambia proprio nulal in effetti.
Impostando text-align:center al tag che contiene l'immagine la posiziona alla metà precisa del video, comportamento a me noto per altro, e facilmente risolvibile quando si conoscono le dimensioni esatte dell'immagine (impongo a quest'ultima un margin-left di -metàlunghezza ed è fatta) Ma visto che la lunghezza di questa immagine è a me sconosciuta... Avevo pensato di aggirare l'ostacolo, come scritto nel primo post, sovrapponendo due immagini di uguale dimensione in due div annidate. Nella prima div l'immagine è nascosta (visibility:hidden) e mi serve solo per far conoscere alla div successiva la dimensione in modo da impostare il margin-left a -50% e che questa percentuale si riferisca alla dimensione dell'immagine già scalata. La cosa stranamente funziona solo sul mio schermo 16:9 ho provato a vedere il risultato su uno schermo con ratio classico e non funziona :/ con mio sommo disappunto.

@Mich_:
ho provato la tua soluzione, ma l'immagine non viene scalata, per altro era la prima cosa che avevo provato con l'unica differenza che non avevo impostato le dimensioni delle div a 100% ed il display:block; per le immagini...

Ora farò altre prove, se avete suggerimenti sono ben accetti, se la trovo io ve la comunicherò ^_^

**oreZ** · 07-12-2009, 13:00

Non so' perché ma non mi fa editare il messaggio precedente, comunque ho dimenticato di specificare che position:absolute; è necessario per far sì che l'immagine venga ridimensionata. Ho provato infatti ad aggiungerlo al codice suggerito da Mich_ ed almeno lo scalamento in altezza funziona.

Discussione: Centrare immagine scalata automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

Centrare immagine scalata automaticamente

Re: Centrare immagine scalata automaticamente

Permessi di invio