HTML Responsive Web Design. Imagini responsive. Utilizarea proprietății width. Utilizarea proprietății max-width.
Imagini responsive
Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.
Utilizarea proprietății lățime (width)
Dacă proprietatea CSS width este setată la 100%, imaginea va fi receptivă și va scala în sus și în jos:
Exemplu:
Utilizarea proprietății cu lățimea maximă (max-width)
Dacă proprietatea cu lățimea maximă (max-width) este setată la 100%, imaginea va scădea în jos dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:
.jpg)
Exemplu:
Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.
Utilizarea proprietății lățime (width)
Dacă proprietatea CSS width este setată la 100%, imaginea va fi receptivă și va scala în sus și în jos:
Exemplu:
<img src="img_man.jpg" style="width:100%;">
Observați că în exemplul de mai sus, imaginea poate fi amplificată 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 cu lățimea maximă (max-width)
Dacă proprietatea cu lățimea maximă (max-width) este setată la 100%, imaginea va scădea în jos dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:
Exemplu:
<img src="img_man.jpg" style="max-width:100%;height:auto;">