Un <img> element este un element în linie (valoarea afișată de inline-block). Poate fi ușor centrat prin adăugarea text-align: center; Proprietate CSS pentru elementul părinte care îl conține.

Pentru a centra o imagine folosind text-align: center; trebuie să plasați <img> în interiorul unui element la nivel de bloc, cum ar fi a div. Din moment ce text-align proprietatea se aplică numai elementelor la nivel de bloc, pe care le plasați text-align: center; pe elementul de ambalare la nivel de bloc pentru a realiza o centrare orizontală <img>.

Exemplu

<!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"> <!-- Block parent element -->
      <img src="https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/user.png" alt="John Doe">
    </div>
  </body>
</html>

Notă: Elementul părinte trebuie să fie un element bloc. Dacă nu este un element bloc, ar trebui să adăugați display: block; Proprietate CSS împreună cu text-align proprietate.

<!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"> <!-- Inline parent element -->
      <img src="https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/user.png" alt="">
    </span>
  </body>
</html>

Demo: Codepen

Fit Fit

Odată ce imaginea dvs. este centrată, vă recomandăm să o redimensionați. object-fit Proprietatea specifică modul în care un element răspunde la lățimea / înălțimea casetei părinte.

Această proprietate poate fi utilizată pentru imagine, video sau orice alt suport media. Poate fi folosit și cu object-position proprietate pentru a obține mai mult control asupra modului în care este afișat suportul media.

Practic folosim object-fit proprietate pentru a defini modul în care se întinde sau strânge un suport de comunicare în linie.

Sintaxă

.element {
    object-fit: fill || contain || cover || none || scale-down;
}

Valori

  • fill: Aceasta este valoarea implicită. Redimensionați conținutul pentru a se potrivi cu caseta părinte, indiferent de raportul de aspect.
  • contain: Redimensionați conținutul pentru a umple caseta părinte folosind raportul de aspect corect.
  • cover: asemănător cu contain dar deseori decupează conținutul.
  • none: afișează imaginea în dimensiunea originală.
  • scale-down: compara diferența dintre none și contain pentru a găsi cea mai mică dimensiune a obiectului concret.

Compatibilitatea browserului

object-fit este acceptat de majoritatea browserelor moderne, pentru cele mai actualizate informații despre compatibilitate puteți verifica acest lucru http://caniuse.com/#search=object-fit.

Documentație