หน้านี้ได้รับการแปลโดย Cloud Translation API

รูปภาพ

กล่องโต้ตอบการแจ้งเตือน

หากรูปภาพกว้างกว่าคอลัมน์เนื้อหาหลัก (ซึ่งมักเกิดขึ้นในหน้าจอขนาดเล็ก) DevSite จะจำกัดรูปภาพให้มีขนาดเท่ากับความกว้างของคอลัมน์โดยอัตโนมัติ อย่างไรก็ตาม หากรูปภาพมีการตั้งค่าแอตทริบิวต์ทั้ง width และ height ระบบจะปรับขนาดเฉพาะความกว้างเท่านั้น ซึ่งจะทำให้รูปภาพบิดเบี้ยว ดังนั้น อย่าตั้งค่า height ของรูปภาพ ซึ่งหมายความว่าหน้าเว็บอาจวาดใหม่หากรูปภาพโหลดช้า (ทําให้หน้าเว็บกระโดด) แต่วิธีนี้ดีกว่ารูปภาพที่แสดงไม่พอในหน้าจอ

คุณสามารถใช้ class="screenshot" กับรูปภาพเพื่อให้มีเส้นขอบที่แยกรูปภาพออกจากข้อความที่อยู่ใกล้เคียง ซึ่งมักใช้กับภาพหน้าจอที่มีพื้นหลังสีขาวและอาจมองไม่เห็นในหน้าเว็บ อย่าใช้กับรูปภาพที่ไม่จําเป็น

ลอยอยู่ข้างข้อความ

รูปภาพด้านขวายังมี class="attempt-right" ด้วย ซึ่งจะลอยรูปภาพไปทางขวาบนหน้าจอขนาดใหญ่ แต่บังคับให้รูปภาพอยู่ในเลย์เอาต์แนวตั้งบนหน้าจอขนาดเล็กกว่า เช่น แท็บเล็ตและอุปกรณ์ที่เล็กกว่านั้น ซึ่งการลอยไปทางขวาจะทำให้เกิดปัญหา หรือจะใช้ class="attempt-left" ก็ได้ หากต้องการใช้ attempt-left และ attempt-right ร่วมกัน ให้ตรวจสอบว่าองค์ประกอบ attempt-left อยู่ก่อน

เมื่อรูปภาพลอยอยู่ รูปภาพต้องไม่เกิน 50% ของความกว้างของคอลัมน์ หากมี ระบบจะปรับขนาดใหม่

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

คุณสามารถใช้คลาสเดียวกันนี้เพื่อวางองค์ประกอบอื่นๆ เช่น <figure> ที่มีทั้งรูปภาพและคำบรรยายได้ ดังนี้

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

การล้างข้อความที่ลอย

หากต้องการป้องกันไม่ให้ข้อความตัดขึ้นบรรทัดใหม่รอบองค์ประกอบที่ลอยอยู่และแสดงที่ความกว้างเดิม ให้เพิ่มคลาส clear ลงในองค์ประกอบที่ได้รับผลกระทบซึ่งอยู่หลังองค์ประกอบที่ลอยอยู่

<p class="clear">Hello world.</p>

ตัวอย่างที่มีคลาส clear

ในตัวอย่างนี้ ย่อหน้าที่สองมีคลาส clear

กล่องโต้ตอบการแจ้งเตือน

ย่อหน้านี้จะตัดขึ้นบรรทัดใหม่รอบรูปภาพที่ลอยอยู่ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ย่อหน้านี้มีคลาสที่ชัดเจนและไม่มีการตัดขึ้นบรรทัดใหม่รอบรูปภาพที่ลอย Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

ตัวอย่างที่ไม่มีคลาส clear

ในตัวอย่างนี้ ทั้ง 2 ย่อหน้าจะตัดขึ้นบรรทัดใหม่รอบรูปภาพที่ลอยอยู่

กล่องโต้ตอบการแจ้งเตือน

ย่อหน้านี้จะตัดขึ้นบรรทัดใหม่รอบรูปภาพที่ลอยอยู่ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

รูปภาพธีมมืด

DevSite มีชุดชื่อคลาสเล็กๆ ที่ใช้กับรูปภาพเพื่อแก้ไขลักษณะที่ปรากฏเมื่อเปิดใช้ธีมมืด

การทำให้รูปภาพมืดลง

โดยค่าเริ่มต้น รูปภาพทั้งหมดยกเว้นไฟล์ SVG จะมืดลงเล็กน้อยในธีมมืด

หากต้องการนำการปรับความเข้มเริ่มต้นออกจากรูปภาพเมื่อเปิดใช้ธีมมืด ให้เพิ่มคลาส no-filter ลงในรูปภาพ โดยทำดังนี้

<img src="/path/to/image.jpg" class="no-filter" alt="">

การกลับสีรูปภาพ

สำหรับรูปภาพที่มีชุดสีโมโนโครมสีดําหรือสีเข้ม ให้เพิ่มคลาส invert ลงในรูปภาพเพื่อให้แสดงเป็นสีขาว/สว่างในธีมมืด

<img src="/site-assets/logo-github.png" class="invert" alt="">

สําหรับหน้า _index.yaml ให้เพิ่ม invert ลงในช่อง classname สําหรับรายการแถว

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

รูปภาพตัวแปรธีมมืดแยกต่างหาก

หากต้องการระบุรูปภาพแยกต่างหากที่จะแสดงเฉพาะเมื่อเปิดใช้ธีมมืด ให้ตัดองค์ประกอบ <img> ที่มีอยู่ไว้ในองค์ประกอบ <picture> และเพิ่มองค์ประกอบ <source> สำหรับตัวแปรธีมมืด

ในตัวอย่างด้านล่าง มีไฟล์ SVG 2 ไฟล์สำหรับโลโก้ตัวอักษรล้วนของ Google ภายในองค์ประกอบ <picture> เมื่อปิดใช้ธีมมืด ระบบจะแสดงไฟล์รูปภาพภายในองค์ประกอบ <img> ซึ่งแสดงโลโก้ตัวอักษรล้วนด้วยสีของแบรนด์ Google 4 สี เมื่อเปิดใช้ธีมมืด ระบบจะแสดงไฟล์รูปภาพภายในองค์ประกอบ <source> โดยโลโก้ตัวอักษรจะเป็นสีขาวล้วนและไม่มีสีของแบรนด์

ตัวอย่าง

รหัส

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

หมายเหตุ

เนื่องจากธีมมืดเปิดใช้อยู่เบื้องหลัง Flag ฟีเจอร์ โปรดทราบข้อมูลต่อไปนี้เกี่ยวกับแอตทริบิวต์ขององค์ประกอบ <source>

องค์ประกอบ <source> ต้องมีคลาส devsite-dark-theme ซึ่งจะเป็นฮุกสำหรับส่วนหน้าของ DevSite เพื่ออัปเดตแอตทริบิวต์สื่อและค่าของแอตทริบิวต์นั้น โดยขึ้นอยู่กับตัวเลือกธีมมืดที่ผู้ใช้เลือก ซึ่งได้แก่ light, dark หรือ device แอตทริบิวต์สื่อต้องมีข้อความค้นหาสื่อ (prefers-color-scheme: dark) ในค่า หากคุณมีองค์ประกอบ <source> ที่มีข้อความค้นหา media ในแอตทริบิวต์สื่ออยู่แล้ว ให้เพิ่มข้อความค้นหาสื่อที่มีอยู่ต่อท้ายด้วย and (prefers-color-scheme: dark) หรือเพิ่มองค์ประกอบ <source> ใหม่ซึ่งมีค่าแอตทริบิวต์สื่อเป็น (prefers-color-scheme: dark) ระบบจะนำการค้นหา media และค่าออกหรือแทนที่ด้วยค่าอื่น ทั้งนี้ขึ้นอยู่กับตัวเลือกธีมมืดที่ผู้ใช้เลือก แม้ว่าชื่อไฟล์ของรูปภาพสำหรับธีมมืดในแอตทริบิวต์ srcset จะเป็นอะไรก็ได้ แต่เราขอแนะนำให้เพิ่ม -dark-theme ต่อท้ายชื่อไฟล์ของรูปภาพที่มีอยู่