Centrare in verticale un immagine dentro un div più piccolo

**pegaso22** · 14-04-2016, 19:37

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.

**pegaso22** · 15-04-2016, 10:15

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?

**pegaso22** · 15-04-2016, 11:03

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.

Discussione: Centrare in verticale un immagine dentro un div più piccolo

Strumenti discussione

Ricerca discussione

Visualizza

Centrare in verticale un immagine dentro un div più piccolo

Permessi di invio