Η ετικέτα HTML <picture>

  • Προηγούμενη σελίδα <param>
  • Επόμενη σελίδα <pre>

Ορισμός και χρήση

<picture> Η ετικέτα δίνει στον προγραμματιστή ιστού μεγαλύτερη ευελιξία στη σύνδεση πόρων εικόνας.

<picture> Η πιο συχνή χρήση του στοιχείου είναι στη σχεδιαστική απόκριση. Μπορεί να σχεδιαστεί πολλές εικόνες για να γεμίσουν καλύτερα το παράθυρο περιήγησης του προγράμματος, αντί να επεκταθεί ή να συρρικνωθεί μια εικόνα ανάλογα με το πλάτος του παραθύρου.

<picture> στοιχεία περιέχουν δύο ετικέτες: μια ή περισσότερες <source> ετικέτα και ένα <img> ετικέτα.

Ο περιηγητής θα βρει το πρώτο στοιχείο <picture> Ο τελευταίος υποστοιχος του στοιχείου είναι απαραίτητος, χρησιμοποιείται ως εναλλακτική επιλογή όταν δεν ταιριάζει κανένα σημείο πηγής.

Συμβουλή:<picture> Η λειτουργία του στοιχείου <video> και <audio> Παρόμοια. Μπορείτε να ρυθμίσετε διαφορετικές πηγές, η πρώτη πηγή που ταιριάζει στις προτιμήσεις σας θα χρησιμοποιηθεί.

Επίσης, δείτε:

HTML Γραφείο:HTML <picture> στοιχείο

CSS Γραφείο:CSS Απαντητική σχεδιασμός - Εικόνα

Παράδειγμα

<picture> Τρόπος χρήσης της ετικέτας:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Προσπάθησε να το δοκιμάσεις

Γενικές ιδιότητες

<picture> Η ετικέτα υποστηρίζει επίσης Γενικές ιδιότητες HTML.

Αντικειμενικές ιδιότητες γεγονότων

<picture> Η ετικέτα υποστηρίζει επίσης Αντικειμενικές ιδιότητες γεγονότων στο HTML.

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη διάταξη σηματοδοτούν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ετικέτα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0
  • Προηγούμενη σελίδα <param>
  • Επόμενη σελίδα <pre>