ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5

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

<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>

<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>

<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>

<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>

<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>

<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>