Articolo originale: How to Center an Image Using Text Align: Center di freeCodeCamp.org

Tradotto e adattato da: Ilenia Magoni

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 a contain ma spesso taglia il contenuto.
  • none: visualizza l'immagine nella sua dimensione originale.
  • scale-down: confronta la differenza tra none e contain 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.

Documentazione