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

    Centrare in verticale un immagine dentro un div più piccolo

    Buonasera a tutti,
    è da qualche giorno che faccio ricerche e prove però non trovo la soluzione.
    Come posso centrare in verticale un immagine che è più alta del div che la contiene?
    Praticamente voglio far visualizzare la porzione centrale dell'immagine.
    C'è da considerare che il div contenitore ha altezza e larghezza auto in quanto si deve adattare allo schermo, ho solo un max-height da rispettare.

    Spero di essere stato chiaro.

    Fatemi sapere.
    Grazie mille.

  2. #2
    Questo è un codice di esempio:
    codice:
    <style>
    .contenitore{
        width: auto;
        height: auto;
        max-width: 1254px;
        max-height:488px;
        overflow:hidden;
        text-align:center;
    }
    .immagine{
        position: relative;
        width: 100%;
        height: auto;
    }
    </style>
    </head>
    
    
    <body>
    <div class="contenitore">
        <img class="immagine" src="miaimmagine.jpg">
    </div>
    </body>
    Dove per esempio l'immagine ha dimensione 630 x 412 px
    Senza usare line-height non riesco a far si che si veda la porzione centrale dell'immagine.
    C'è da considerare che l'immagine può avere qualsiasi dimensione, 630x412 è un esempio.
    Attualmente la foto si vede dall'angolo in alto a sinistra.
    Qualcuno sa aiutarmi?

  3. #3
    Questo il codice completo che funziona, dovrei però togliere line-height perchè quando stringo l'immagine diventa più bassa e non posso avere l'altezza del contenitore sempre impostata a 488px.

    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    
    <style>
    img {
      vertical-align: middle;
    }
    .altezzaelencofoto1 {
        width: auto;
        height: auto;
        max-width: 1254px;
        max-height:488px;
        line-height: 488px;
        overflow:hidden;
        text-align:center;
    }
    .fotoelenco1 {
        position: relative;
        width: 100%;
        height: auto;
        margin-top:-100%;
        margin-bottom:-100%;
    }
    </style>
    </head>
    
    
    <body>
    <div class="altezzaelencofoto1">
        <img src="miafoto.jpg" class="fotoelenco1">
    </div>
    </body>
    </html>
    Se lo levo senza fare altre variazioni non si vede la foto, si vedere solo uno spicchio di 18px.
    Ultima modifica di pegaso22; 15-04-2016 a 11:08

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