Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Centrare immagini in div affiancati

  1. #1

    Centrare immagini in div affiancati

    Salve, sto avendo problemi ad affiancare tre immagini, ciascuna con una propria forma e dimensione, in tre div destinati a contenerne una ciascuna.
    Lo scopo è simulare la pubblicazione di immagini in maniera ordinata indipendentemente dalle dimensioni delle immagini, opportunamente scalate in css...
    Questo è il codice css...
    codice:
    div.foto {
    	float: left;
    	text-align: center;
    	vertical-align: middle;
    	height: 200px;
    	width: 200px;
    	margin: 10px;
    }
    img.prodotto {
    	width: auto;
    	height: auto;
    	max-width: 200px;
    	max-height: 200px;
    	margin: auto;
    }
    Questo invece è l'html (file in html5)...
    codice:
    <div class="foto"><img src="scanner.jpg" class="prodotto" /></div>
    <div class="foto"><img src="stampante.jpg" class="prodotto" /></div>
    <div class="foto"><img src="yatta-small.jpg" class="prodotto" /></div>
    I div sono tre quadrati 200x200 che devono contenere le tre immagini in dimensioni reali se più piccole di 200x200, scalate a massimo 200x200 in caso contrario.

    Funziona, tranne per il centramento delle immagini nei div.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,015
    Ciao, il vertical-align messo lì non serve a granché (come puoi avere constatato da te stesso). In verità, quella del "centramento verticale" col CSS è stata da sempre una questione complicata o quantomeno di soluzione poco intuitiva. Per questo esistono varie tecniche e diversi hack (che sono stati elaborati nel tempo) per poter risolvere il problema.

    Qui puoi trovare una guida con differenti metodi per centrare sia orizzontalmente sia verticalmente:
    https://css-tricks.com/centering-css-complete-guide/

    Qui qualche altro trick:
    http://zerosixthree.se/vertical-alig...-lines-of-css/

    Ad oggi una valida soluzione può essere l'uso di flex-box, a patto che il tuo target di utenza utilizzi dei browser sufficientemente recenti che supportano pienamente tale proprietà (ad es. IE11 può dare problemi nella larghezza delle immagini che in alcuni casi risulta estesa in maniera inconsistente).

    Potrai quindi risolvere applicando una cosa del genere ai tuoi div contenitori:
    codice:
    display: flex;
    align-items: center;
    justify-content: center;
    Ovviamente in questo caso le proprietà come text-align e vertical-align non ti serviranno.

    Personalmente rivedrei l'intero codice in questo modo:
    codice:
    div.foto {
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
    }
    img.prodotto {
        max-width: 100%;
        max-height: 100%;
    }
    A meno di avere altre regole che possono sovrascrivere queste, di fatto non hai bisogno di specificare width e height come auto sull'elemento img, perché questo è il valore di default. Inoltre, usando 100% per max-width e max-height, il valore di 200px (o quello che è) sarà sufficiente definirlo un'unica volta sulle dimensioni del contenitore, rendendo quindi più semplice un'eventuale personalizzazione. Anche margin penso possa essere omesso per img.

    Lo scopo è simulare la pubblicazione di immagini in maniera ordinata indipendentemente dalle dimensioni delle immagini, opportunamente scalate in css...
    Se ti interessa un sistema completo, recentemente a seguito di un'altra discussione avevo fatto una pillola in cui avevo elaborato una griglia immagini del genere (con le immagini che vengono opportunamente centrate e scalate dentro i contenitori) che, oltre a queste da te indicate, ha anche altre caratteristiche come il fattore responsive e la possibilità di inserire delle descrizioni per ogni immagine, ma chiaramente il tutto potrebbe essere personalizzato a seconda delle proprie esigenze. Quantomeno potrebbe essere una base di partenza.

    Qui la pillola, qui il Pen.

    Da tener presente che in quel caso (a parte il flex-box usato per impaginare la griglia) ho comunque usato la tecnica conosciuta come "ghost element hack" per centrare verticalmente le immagini nei contenitori, perché questo permette una corretta visualizzazione anche su IE11 (che con flex-box ha il problema menzionato sopra).


    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Grazie della corposa risposta.
    La mia discussione è nata proprio dal fatto che CSS non offre un comando univoco per il centramento verticale di oggetti in un div, nonostante esista da vari anni e il problema sia tutt'altro che secondario.
    La pagina dovrebbe essere più compatibile possibile con tutti i browser per cui la via del flex-box non posso seguirla.
    Più che altro, essendo una class di immagini di dimensioni differenti, non posso sfruttare il position: absolute "giocando" poi col 50%
    codice:
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    La soluzione ottimale sarebbe quella usata da Ebay per le immagini a corredo di una inserzione, a meno dello zoom al passaggio del mouse.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,015
    La mia discussione è nata proprio dal fatto che CSS non offre un comando univoco per il centramento verticale di oggetti in un div, nonostante esista da vari anni e il problema sia tutt'altro che secondario
    Da quel che ricordo (molto vagamente) è un problema insito nell'algoritmo del box-model CSS, legato alla complessità nel calcolo degli ingombri in altezza dei vari elementi durante il processo di elaborazione della pagina... o qualcosa del genere , per cui risulta impervio da sempre (almeno finché non sono stati sviluppati altri modelli come flex-box) ottenere un codice CSS che risolva facilmente l'allineamento in verticale.

    Qualcuno una volta scrisse (liberamente tradotto):
    Il modo più semplice per centrare verticalmente qualcosa in CSS è chiudere il tuo laptop e andare al bar.
    (fonte: https://twitter.com/thedaniel/status/414123893830336513)

    Condivido

    La soluzione ottimale sarebbe quella usata da Ebay per le immagini a corredo di una inserzione
    che applicata al tuo codice, è questa:
    codice:
    div.foto {
        position: relative;
        float: left;
        height: 200px;
        width: 200px;
        margin: 10px;
    }
    img.prodotto {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        min-width: auto;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    Ti dirò... non la conoscevo, ho verificato e mi pare buona. Non si finisce mai di imparare
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    codice:
    div.foto {
        position: relative;
        float: left;
        height: 200px;
        width: 200px;
        margin: 10px;
    }
    img.prodotto {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        min-width: auto;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    Ti dirò... non la conoscevo, ho verificato e mi pare buona. Non si finisce mai di imparare
    Eh lo so che è una buona soluzione! Solo che ieri non sono riuscito a recuperarla aprendo il sorgente di una pagina Ebay...
    Grazie.

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 © 2018 vBulletin Solutions, Inc. All rights reserved.