Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Cumpara abonament!
Plateste cu PayPal

Element de imagine în HTML: picture, img, source, bandwidth, format support.

Partajeaza in Google Classroom

Partajeaza cu Google Classroom
Susține Lectii-Virtuale!

Teorie: Descriere video Descarcă PDF

Element de imagine în HTML

Elementul de imagine ne permite să afișăm imagini diferite pentru diferite dispozitive sau dimensiuni de ecran.


Elementul HTML <picture>

HTML5
a introdus elementul <picture> pentru a adăuga mai multă flexibilitate la specificarea resurselor de imagine.
Elementul <picture> conține o serie de elemente <source>, fiecare referindu-se la diferite surse de imagine. Astfel browserul poate alege imaginea care se potrivește cel mai bine vizualizării curente și / sau dispozitivului.
Fiecare element <source> are atribute care descriu când imaginea lor este cea mai potrivită.

Exemplu:

Afișați imagini diferite pe diferite dimensiuni ale ecranului:
<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>
Notă: Specificați întotdeauna un element <img> drept ultimul element copil al elementului <imagine>. Elementul <img> este folosit de browserele care nu acceptă elementul <picture> sau dacă niciuna dintre etichetele <source> nu se potrivește.

Când să utilizați elementul Picture

Există două scopuri principale pentru elementul <picture>:

1. Lățime de bandă (Bandwidth)

Dacă aveți un ecran sau un dispozitiv mic, nu este necesar să încărcați o imagine mare. Browserul va utiliza primul element <source> cu valorile atributului potrivit și va ignora oricare dintre elementele următoare.

2. Formatați suportul (Format Support)

Este posibil ca unele browsere sau dispozitive să nu accepte toate formatele de imagine. Folosind elementul <picture>, puteți adăuga imagini cu toate formatele, iar browserul va folosi primul format pe care îl recunoaște și va ignora oricare dintre formatele următoare.

Exemplu:

Browserul va folosi primul format de imagine pe care îl recunoaște:
<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Notă: Browserul va folosi primul element <source> cu valorile atributului potrivit și va ignora următoarele elemente <source>.
Cumpara abonament
Plătește cu PayPal

Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2021 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri