HTML <picture> 标籤

  • หน้าก่อน <param>
  • หน้าต่อไป <pre>

ការអនុញ្ញាត និងការប្រើប្រាស់

<picture> សញ្ញានេះអនុញ្ញាតអោយអ្នកអភិវឌ្ឍវគ្គវិគីភាពប្រើប្រាស់ការសម្រេចចិត្តនៅពេលកំណត់ប្រភពរូបភាព

<picture> ការប្រើប្រាស់សញ្ញាតែមួយចំនួនគឺជាការប្រើប្រាស់ស្រាប់ស្រមោលនៅក្នុងការប្រើប្រាស់វិគីភាពប្រតិបត្តិ អ្នកអាចរចនារូបភាពមួយចំនួនដើម្បីបំពេញមុខប្រវត្តិអាត្រាមុខផ្សាយ ជាជាងអោយរូបភាពមួយត្រូវបានពន្លងទៅជាប់ទៅនឹងមុខប្រវត្តិអាត្រាមុខផ្សាយ ឬក៏ត្រូវបានពន្លងទៅត្រឹមត្រូវនឹងមុខប្រវត្តិអាត្រាមុខផ្សាយ

<picture> សញ្ញាមានពីរសញ្ញា: មួយ ឬមួយចំនួន <source> សញ្ញា និង <img> សញ្ញា。

កម្មវិធីអ្នកកំពុងប្រើនឹងរកសញ្ញា <source> ដែលត្រូវគ្នានឹងតំរង់មុខប្រវត្តិអាត្រាមុខផ្សាយ បន្ទាប់មកវានឹងបង្ហាញរូបភាពដែលត្រឹមត្រូវ (ដែលបានកំណត់នៅក្នុង srcset 属性) <img> សញ្ញាត្រូវបានប្រើជាសញ្ញានឹង <picture> សញ្ញាបន្ទាប់បន្សំនៃសញ្ញានឹងចាំបាច់ ហើយត្រូវបានប្រើជាជម្រើសជំនួស នៅពេលមិនមានសញ្ញា source ណាមួយដែលត្រូវគ្នា。

ការផ្តល់ដំបូន្មាន:<picture> ការធ្វើការរបស់សញ្ញា <video> និង <audio> ប្រហែលនេះ។ អ្នកអាចកំណត់ប្រភពផ្សេងៗ ហើយប្រភពដែលស្របគ្នានឹងការសម្រេចចិត្តដំបូងនឹងត្រូវបានប្រើប្រាស់。

សូមអានផ្សេងៗ

HTML តឿនក្រេសHTML <picture> องค์ประกอบ

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>