CSS Stilizarea imaginilor. Imagini responsive. Centrați o imagine.

Imagini responsive (Responsive Images)

Imaginile responsive se vor regla automat pentru a se potrivi cu dimensiunea ecranului.

Redimensionați fereastra browserului pentru a vedea efectul:



Dacă doriți ca o imagine să scadă în jos (scale down ), dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială, adăugați următoarele:

Exemplu:

img {
  max-width: 100%;
  height: auto;
}

Centrați o imagine (Center an Image)

Pentru a centra o imagine, setați marginea stângă și dreapta pe auto și transformați-o într-un element block:



Exemplu:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}