Web Design Responsiv - Imagini. Utilizarea proprietății width. Utilizarea proprietății max-width. Adăugați o imagine la pagina web.

Web Design Responsiv - Imagini

Utilizarea proprietății width

Dacă proprietatea lățimii (width) este setată la un procent și înălțimea este setată la „auto”, imaginea va fi receptivă și va scala în sus și în jos:

Exemplu:

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

Observați că în exemplul de mai sus, imaginea poate fi redusă pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă (max-width).

Utilizarea proprietății lățime maximă (max-width)

Dacă proprietatea lățimii maxime (max-width) este setată la 100%, imaginea se va reduce dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:

Exemplu:

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

Adăugați o imagine la pagina web de exemplu

Exemplu:

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