การแสดงผลรูปภาพด้วย Bootstrap 5
         เราสามารถใช้ Bootstrap 5 ตกแต่งรูปทรงการแสดงผลของรูปภาพได้ 3 แบบ คือ แบบสี่เหลี่ยมมุมใน (Rounded Corners) แบบวงกลม (Circle) และแบบทัมบ์เนล (Thumbnail) โดยมีรายละเอียดและวิธีใช้ดังนี้

การแสดงผลรูปภาพแบบสี่เหลี่ยมมุมมน
         เราสามารถใช้ Bootstrap กำหนดการแสดงผลรูปภาพให้เป็นแบบสี่เหลี่ยมมุมมน โดยใช้คลาส .rounded ร่วมกับแท็ก <img> ซึ่งจะส่งผลให้มุมทั้ง 4 ของรูปภาพแสดงผลเป็นมุมโค้งหรือมุมมน

<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>ทำมุมทั้ง 4 ของรูปภาพให้เป็นมุมมนด้วยคลาส .rounded</p> <img src="./images/picture.jpg" class="rounded" alt="Notecyber"> </div>

ผลลัพธ์

แสดงผลรูปภาพแบบวงกลม
         ถ้าต้องการให้รูปภาพแสดงผลเป็นแบบวงกลม สามารถทำได้โดยใช้คลาส .rounded-circle ร่วมกับแท็ก <img> ซึ่งจะมีผลทำให้รูปภาพแสดงผลเป็นวงกลมซึ่งรูปภาพจะเป็นวงกลมจริง ๆ ก็ต่อเมื่อรูปต้นฉบับเป็นสี่เหลี่ยมจัตุรัส คือมีความกว้างและความสูงเท่ากันเท่านั้น ถ้ารูปมีความกว้างมากกว่าความสูง จะแสดงผลเป็นวงรีแนวนอน แต่ถ้ารูปมีความกว้างน้อยกว่าความสูง จะแสดงผลเป็นวงรีแนวตั้ง

<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>ทำมุมทั้ง 4 ของรูปภาพให้เป็นมุมมนด้วยคลาส .rounded-circle</p> <img src="./images/picture.jpg" class="rounded-circle" alt="Notecyber"> </div>

 

ผลลัพธ์

ตัวอย่างที่กำหนดให้รูปมีความกว้างและความสูงเท่ากัน (จะแสดงผลเป็นวงกลม)

Bordered Table กำหนดเส้นขอบตาราง
         ถ้าต้องการให้ตารางมีเส้นขอบ สามารถทำได้โดยใช้คลาส .table-bordered ดังนี้

<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>ทำมุมทั้ง 4 ของรูปภาพให้เป็นมุมมนด้วยคลาส .img-thumbnail</p> <img src="./images/picture.jpg" class="img-thumbnail" alt="Notecyber"> </div>

 

ผลลัพธ์

การแสดงผลรูปภาพแบบ Responsive
         ถ้าต้องการให้รูปภาพแสดงผลแบบ Responsive คือปรับขนาดตามหน้าจอที่แสดงผลในขณะนั้น สามารถทำได้โดยใช้คลาส .img-fluid ร่วมกับแท็ก <img> ซึ่งจะมีผลทำให้รูปภาพปรับขนาดตามการเปลี่ยนแปลงของหน้าจอโดยอัตโนมัติ (ปรับตามขนาดของอีลิเมนต์แม่ที่เปลี่ยนไป) คลาส .img-fluid จะทำให้รูปภาพมีสไตล์ max-width: 100%; และ height: auto;

<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>ทำมุมทั้ง 4 ของรูปภาพให้เป็นมุมมนด้วยคลาส .img-thumbnail</p> <img src="./images/picture.jpg" class=".img-thumbnail" alt="Notecyber"> </div>

 

ผลลัพธ์