สำหรับการเพิ่มรูปภาพใน Markdown:
ไวยากรณ์ได้รับด้านล่าง
สำหรับการแก้ไขขนาดรูปภาพใน Markdown:
สำหรับการปรับเปลี่ยนขนาดของรูปภาพใน Markdown เราใช้แท็ก “ ” ของ HTML เฉพาะแท็กนี้เท่านั้นที่ช่วยในการปรับเปลี่ยนขนาดของรูปภาพใน Markdown และไวยากรณ์ของแท็ก “
” นี้แสดงไว้ด้านล่าง
< img src = 'ชื่อภาพ' ทุกอย่าง = “” ความกว้าง = 'ค่า' ความสูง = 'ค่า' >
เราเปลี่ยนขนาดของภาพได้โดยการตั้งค่าความกว้างและความสูงเป็นตัวเลขและเปอร์เซ็นต์ นอกจากนี้เรายังสามารถใช้แอตทริบิวต์ style ในแท็ก “ ” เพื่อแก้ไขขนาดของรูปภาพใน Markdown
ตัวอย่าง # 01:
เราใช้ Visual Studio Code เพื่อดำเนินการรหัส Markdown สำหรับรหัส Markdown เราต้องเปิดทั้งโปรแกรมแก้ไขข้อความและหน้าต่างแสดงตัวอย่าง ในเท็กซ์เอดิเตอร์ เราต้องเพิ่มอินพุตและรับเอาต์พุตในหน้าต่างแสดงตัวอย่าง ในโปรแกรมแก้ไขข้อความ ก่อนอื่นเราเพิ่มรูปภาพใน Markdown โดยวาง “!” สัญลักษณ์แล้วเพิ่มวงเล็บเหลี่ยมที่เราเพิ่ม 'ข้อความแสดงแทน' ตอนนี้เรากำลังเพิ่มเส้นทางของภาพ
เราป้อนชื่อรูปภาพพร้อมนามสกุลเพราะทั้งรหัสและรูปภาพถูกบันทึกไว้ในไดเร็กทอรีเดียวกัน ดังนั้นเราจึงเพิ่มชื่อที่นี่ซึ่งก็คือ “cloud.png” จากนั้น เราเพิ่มข้อความซึ่งก็คือ “Cloud Image” และนี่คือข้อความที่แสดงเมื่อวางเมาส์ไว้เท่านั้น ตอนนี้รูปภาพถูกเพิ่มแล้วและเรายังสามารถเห็นภาพนี้ในหน้าต่างแสดงตัวอย่าง
รูปภาพคลาวด์แสดงอยู่ด้านล่างเมื่อเราเพิ่มรูปภาพนี้ในโค้ด Markdown ซึ่งแสดงอยู่ด้านบน
ตัวอย่าง # 02:
ตอนนี้ เรากำลังแก้ไขขนาดของภาพนี้โดยใช้แท็ก “ ” ขั้นแรก เราป้อน 'src' ที่มีการเพิ่มชื่อหรือเส้นทางของรูปภาพ หลังจากนี้เราวาง 'alt' และปรับ 'Cloud Image' เราปรับ 'ความกว้าง' ของภาพเป็น '230' 'ความสูง' ถูกปรับเป็น '300' นอกจากนี้เรายังเพิ่ม 'title' ในแท็ก '
' และค่าของ 'title' นี้คือ 'Cloud title' ตอนนี้ ขนาดของรูปภาพได้รับการแก้ไขแล้ว คุณสามารถดูขนาดที่แก้ไขของรูปภาพในหน้าต่างแสดงตัวอย่าง
ขนาดของรูปภาพในผลลัพธ์นี้ได้รับการแก้ไขและ 'ความกว้าง' ของรูปภาพคือ '230' และ 'ความสูง' คือ '300' เนื่องจากเราได้ปรับความกว้างและความสูงนี้ในโค้ด Markdown
ตัวอย่าง #03:
นอกจากนี้เรายังสามารถแก้ไข 'ความกว้าง' และ 'ความสูง' ของภาพโดยใส่ค่าเป็นเปอร์เซ็นต์ หลังจากเพิ่มชื่อหรือเส้นทางของรูปภาพและปรับ 'alt' เป็น 'Cloud Image' แล้ว เราได้ตั้งค่า 'ความกว้าง' และ 'ความสูง' ของรูปภาพเป็น '50%' จากนั้นเพิ่ม 'ชื่อ' และปิดแท็กนี้
นี่คือรูปภาพที่ปรับขนาดโดยใช้แท็ก “ ” ความสูงและความกว้างของรูปภาพคือ '50%'
ตัวอย่าง # 04:
ตอนนี้ เรากำลังใช้แอตทริบิวต์ 'style' ในแท็ก ' ' นี้เพื่อปรับเปลี่ยนขนาดของรูปภาพใน Markdown เราต้องเพิ่มชื่อของรูปภาพแล้วตามด้วยแอตทริบิวต์ 'alt' หลังจากนี้ เราใส่แอตทริบิวต์ 'สไตล์' และเพิ่ม 'ความกว้างและความสูง' เป็นค่าของมัน 'ความกว้าง' ที่เราตั้งค่าเป็นพิกเซลซึ่งคือ '500px' และ 'ความสูง' คือ '400px' ตอนนี้ขนาดภาพจะปรับตามนั้น
ขนาดของรูปภาพในผลลัพธ์นี้ได้รับการอัปเดตแล้ว ตอนนี้ 'ความกว้าง' คือ '500px' และ 'ความสูง' คือ '400px' ซึ่งมองเห็นได้จากโค้ด Markdown ซึ่งระบุไว้ด้านบน ซึ่งเราได้ปรับความกว้างและความสูงในแอตทริบิวต์ style แล้ว
ตัวอย่าง # 05:
เรากำลังเพิ่มภาพอื่น แต่ในโค้ด Markdown นี้ เราไม่เปลี่ยนขนาดของรูปภาพ ขนาดของรูปภาพจะเปลี่ยนไปเมื่อเราใช้แท็ก “ ” เท่านั้น เราใส่เครื่องหมาย “!” แล้วเพิ่มข้อความในวงเล็บเหลี่ยมซึ่งก็คือ “Sun Image” หลังจากปิดวงเล็บเหลี่ยมแล้ว เราใส่วงเล็บที่เราใส่ชื่อภาพ “New_sun.png” แล้วเพิ่มข้อความที่จะแสดงเมื่อวางเมาส์ ขนาดดั้งเดิมของรูปภาพจะแสดงในผลลัพธ์
แสดงภาพของดวงอาทิตย์เมื่อเราเพิ่มภาพนี้ในโค้ด Markdown นอกจากนี้ ขนาดดั้งเดิมของรูปภาพยังมองเห็นได้ เนื่องจากเราไม่สามารถปรับขนาดของรูปภาพได้โดยไม่ต้องใช้แท็ก “ ”
ตัวอย่าง # 06:
การใช้แท็ก “ ” ทำให้เราเปลี่ยนขนาดของภาพนี้ ขั้นแรก เราเพิ่มชื่อหรือเส้นทางของรูปภาพที่มีขนาดที่เราต้องการแก้ไขในช่อง 'src' 'ความกว้าง' และ 'ความสูง' ของรูปภาพเปลี่ยนเป็น '300' ขนาดของรูปภาพเปลี่ยนไปแล้ว หน้าต่างแสดงตัวอย่างจะแสดงขนาดใหม่ของรูปภาพ
ความกว้างและความสูงของรูปภาพถูกปรับเปลี่ยนเป็น “300”
ตัวอย่าง # 07:
โดยการตั้งค่า 'ความกว้าง' และ 'ความสูง' ของรูปภาพเป็นเปอร์เซ็นต์ เราอาจเปลี่ยนขนาดเหล่านี้ได้อย่างง่ายดาย เราทั้งคู่ปรับ 'ความกว้าง' และ 'ความสูง' ของรูปภาพเป็น '40%' แล้วปิดแท็กนี้
นี่คือรูปภาพที่มีความสูง 40% และความกว้าง 40% เราได้เพิ่มความกว้างและความสูงนี้ในแท็ก “ ” หลังจากเพิ่มชื่อรูปภาพ
ตัวอย่าง # 08:
ตอนนี้ เรากำลังใช้แอตทริบิวต์ 'style' ในแท็ก ' ' เพื่อเปลี่ยนขนาดของรูปภาพใน Markdown เราเพิ่ม 'ความกว้างและความสูง' เป็นค่าให้กับแอตทริบิวต์ 'สไตล์' หลังจากเพิ่มชื่อรูปภาพและแอตทริบิวต์ 'alt' 'ความกว้าง' ที่เราระบุคือ '450px' ในขณะที่ 'ความสูง' จะถูกปรับเป็น '450px' ด้วย ขนาดรูปภาพจะเปลี่ยนไปตามค่าความกว้างและความสูงใหม่เหล่านี้
ตอนนี้ ผลลัพธ์ของรหัสนี้ยังแสดงในหน้าต่างแสดงตัวอย่างซึ่งแสดงอยู่ด้านล่าง ทั้งความกว้างและความสูงของรูปภาพนี้คือ '450px' ในผลลัพธ์ด้านล่างนี้
บทสรุป:
เราได้สำรวจแนวคิดในการเพิ่มรูปภาพโดยละเอียดในคู่มือนี้ และเราได้สำรวจวิธีปรับเปลี่ยนขนาดของรูปภาพใน Markdown ด้วยเช่นกัน เราได้เพิ่มรูปภาพใน Markdown และแก้ไขขนาดด้วยความช่วยเหลือของแท็ก “ ” และได้แสดงวิธีการทำสิ่งเหล่านี้ใน Markdown เราได้เปลี่ยนขนาดของรูปภาพโดยใส่ค่าความกว้างและความสูงเป็นตัวเลขและเปอร์เซ็นต์ เรายังใช้แอตทริบิวต์ style ในแท็ก “
” เพื่ออัปเดตหรือแก้ไขขนาดของรูปภาพใน Markdown