Web Design Responsiv - Imagini. Utilizarea proprietății width. Utilizarea proprietății max-width. Adăugați o imagine la pagina web.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;
}