
ตกแต่งการแสดงผลรูปภาพด้วย 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/girl-1822525_640.jpg" class="rounded" alt="ช้างน้อยน่ารัก"> </div>

แสดงผลรูปภาพแบบวงกลม
ถ้าต้องการให้รูปภาพแสดงผลเป็นแบบวงกลม สามารถทำได้โดยใช้คลาส .rounded-circle
ร่วมกับแท็ก <img>
ซึ่งจะมีผลทำให้รูปภาพแสดงผลเป็นวงกลม
ซึ่งรูปภาพจะเป็นวงกลมจริง ๆ ก็ต่อเมื่อรูปต้นฉบับเป็นสี่เหลี่ยมจัตุรัส คือมีความกว้างและความสูงเท่ากันเท่านั้น ถ้ารูปมีความกว้างมากกว่าความสูง จะแสดงผลเป็นวงรีแนวนอน แต่ถ้ารูปมีความกว้างน้อยกว่าความสูง จะแสดงผลเป็นวงรีแนวตั้ง
ตัวอย่างที่ 1 รูปมีความกว้างมากกว่าความสูง (จะแสดงผลเป็นวงรีแนวนอน)
<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงรูปภาพเป็นวงกลมด้วยคลาส .rounded-circle</p> <img src="./images/girl-1822525_640.jpg" class="rounded-circle" alt="ช้างน้อยน่ารัก" width="640" height="425"> </div>

ตัวอย่างที่ 2 กำหนดให้รูปมีความสูงมากกว่าความกว้าง (จะแสดงผลเป็นวงรีแนวตั้ง)
<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงรูปภาพเป็นวงกลมด้วยคลาส .rounded-circle</p> <img src="./images/girl-1822525_640.jpg" class="rounded-circle" alt="ช้างน้อยน่ารัก" width="400" height="600"> </div>

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

แสดงผลรูปภาพแบบธัมน์เนล
ถ้าต้องการให้รูปภาพแสดงผลเป็นแบบ Thumbnail (มีขอบสีขาวล้อมรอบ) สามารถทำได้โดยใช้คลาส .img-thumbnail
ร่วมกับแท็ก <img>
<div class="container mt-3 bg-default"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงรูปภาพแบบธัมบ์เนลด้วยคลาส .img-thumbnail</p> <img src="./images/girl-1822525_640.jpg" class="img-thumbnail" alt="ช้างน้อยน่ารัก"> </div>

การจัดตำแหน่งรูปภาพ
เราสามารถจัดตำแหน่งรูปภาพให้แสดงชิดด้านซ้ายหรือชิดด้านขวาได้ โดยการใช้คลาส .float-start
จะเป็นการแสดงผลชิดด้านซ้าย การใช้งานคลาส .float-end
จะเป็นการแสดงผลชิดด้านขวา
<div class="container mt-3 bg-default"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงรูปภาพชิดซ้ายหรือชิดขวาด้วยคลาส .float-start, .float-end</p> <img src="./images/girl-1822525_640.jpg" class="rounded-circle float-start" alt="ช้างน้อยน่ารัก" width="300" height="300"> <img src="./images/girl-1822525_640.jpg" class="rounded-circle float-end" alt="ช้างน้อยน่ารัก" width="300" height="300"> </div>

การกำหนดให้รูปภาพแสดงผลตรงกลางเอลิเมนต์
ถ้าต้องการให้รูปภาพแสดงผลอยู่ตรงกึ่งกลางของเอลิเมนต์ สามารถทำได้โดยการใช้คลาส .mx-auto
(margin:auto) และ .d-block
(display:block) ดังนี้
<div class="container mt-3 bg-default"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงรูปภาพให้อยู่กึ่งกลางเอลิเมนต์ด้วยคลาส .mx-auto และ .d-block</p> <img src="./images/girl-1822525_640.jpg" class="mx-auto d-block" alt="ช้างน้อยน่ารัก"> </div>

การแสดงผลรูปภาพแบบ Responsive
ถ้าต้องการให้รูปภาพแสดงผลแบบ Responsive คือปรับขนาดตามหน้าจอที่แสดงผลในขณะนั้น สามารถทำได้โดยใช้คลาส .img-fluid
ร่วมกับแท็ก <img>
ซึ่งจะมีผลทำให้รูปภาพปรับขนาดตามการเปลี่ยนแปลงของหน้าจอโดยอัตโนมัติ (ปรับตามขนาดของอีลิเมนต์แม่ที่เปลี่ยนไป)
คลาส .img-fluid
จะทำให้รูปภาพมีสไตล์ max-width: 100%;
และ height: auto;
<div class="container mt-3"> <h2>ตกแต่งการแสดงผลรูปภาพด้วย Boostrap 5</h2> <p>แสดงผลรูปภาพแบบ Responsive ด้วยคลาส .img-fluid</p> <img src="./images/girl-1822525_640.jpg" class="img-fluid" alt="ช้างน้อยน่ารัก" width="1100" height="500"> </div>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples