HTML แบบตาราง <picture>

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

การกำหนดและการใช้งาน

<picture> แท็กที่มีส่วนในการทำงานให้แก่นักพัฒนาเว็บมีความสะดวกในการกำหนดแหล่งข้อมูลรูปภาพ

<picture> การใช้งานที่สามัญที่สุดขององค์ประกอบเป็นอาทิตย์แนวที่สามารถปรับแต่งเองเพื่อการออกแบบที่สามารถปรับเปลี่ยนทันทีได้ โดยที่อาจจะออกแบบรูปภาพหลายอย่างเพื่อการเติมพื้นที่ของมุมมองปลายทางแบบบูรุษย์ที่มีกว้างของมุมมอง แทนที่จะปรับขนาดของรูปภาพตามกว้างของมุมมอง

<picture> องค์ประกอบที่มีองค์ประกอบสองแท็ก: หนึ่งหรือหลาย <source> แท็ก และ <img> แท็ก。

เครื่องนอนความคิดจะค้นหาเมื่อเปรียบเทียบมีมีเมื่อมีความเหมาะสมกับความกว้างของมุมมองปัจจุบันของ <source> แรก และจะแสดงรูปภาพที่ถูกต้อง (ที่กำหนดใน srcset ของ <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>