Articolo originale: How to Center an Image Using Text Align: Center
Un elemento <img>
è un elemento inline (proprietà display
con valore di inline-block
) e può essere centrato aggiungendo la proprietà CSS text-align: center;
all'elemento genitore che lo contiene.
Per centrare un immagine usando text-align: center;
devi inserire l'immagine dentro un elemento di blocco, come un div
. Visto che la proprietà text-align
si applica solo a elementi di blocco, puoi assegnare la proprietà text-align: center;
all'elemento di blocco genitore per ottenere un'immagine centrata orizzontalmente.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Elemento genitore a blocco -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
Nota: l'elemento genitore deve essere un elemento di blocco. Se non è un elemento di blocco dovresti aggiungere la proprietà CSS display: block;
assieme alla proprietà text-align
.
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- genitore in linea -->
<img src="user.png" alt="">
</span>
</body>
</html>
Demo: Codepen
La proprietà object-fit
Una volta che la tua immagine è centrata, potresti volerla ridimensionare. La proprietà object-fit
specifica come un elemento risponde alla larghezza / altezza dell'elemento genitore.
Questa proprietà può essere usata per immagini, video, o qualsiasi altro media. Può anche essere usata in combinazione con object-position
per avere più controllo su come il media è visualizzato.
In pratica usiamo la proprietà object-fit
per definire come un media inline viene stirato o schiacciato.
Sintassi
.element {
object-fit: fill || contain || cover || none || scale-down;
}
Valori
fill
: questo è il valore di default. Ridimensiona il contenuto per farlo combaciare con l'elemento genitore a discapito dell'aspect-ratio.contain
: Ridimensiona il contenuto per riempire il genitore con l'aspect-ratio corretto.cover
: simile acontain
ma spesso taglia il contenuto.none
: visualizza l'immagine nella sua dimensione originale.scale-down
: confronta la differenza tranone
econtain
per trovare la dimensione concreta più piccola dell'oggetto.
Compatibilità con il browser
La proprietà object-fit
è supportata dalla maggior parte dei browser moderni, per le informazioni aggiornate sulla compatibilità, guarda qui: http://caniuse.com/#search=object-fit.