Bootstrap 5 รูปภาพ
- หน้าก่อน BS5 ตาราง
- หน้าต่อไป BS5 Jumbotron
รูปร่างภาพ
มุมโค้ง
.rounded คลาส .rounded จะทำให้ภาพมีมุมโค้ง
ตัวอย่าง
<img src="flower.jpg" class="rounded" alt="Flower">
วงกลม
.rounded-circle คลาส .rounded-circle จะทำให้ภาพมีลักษณะเป็นวงกลม
ตัวอย่าง
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
ภาพย่อ
.img-thumbnail ภาพย่อ
ตัวอย่าง
คลาส .img-thumbnail จะทำให้ภาพมีลักษณะเป็นภาพย่อ (ด้วยเขตบรรจุ)
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
จัดตั้งภาพเป็นตำแหน่ง .float-start คลาส .float-start จะทำให้ภาพเลื่อนไปทางซ้าย หรือใช้ .float-end ขวางไปทางด้านขวา：
ตัวอย่าง
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
ภาพศูนย์กลาง
เพื่อที่จะทำให้ภาพศูนย์กลาง พวกเราเพิ่มคลาส utility ไปที่ภาพ .mx-auto (margin:auto) และ .d-block (display:block)：
ตัวอย่าง
<img src="tulip.jpg" class="mx-auto d-block">
ภาพที่ตอบสนองทางอึดอัด
ภาพมีขนาดต่างๆ และหน้าจอก็เช่นเดียว ภาพที่ตอบสนองทางอึดอัดจะทำการปรับตัวอัตโนมัติเพื่อตอบสนองขนาดหน้าจอ
โดยการใช้ .img-fluid คลาสเพิ่มเข้าไป <img> โดยใช้แท็กคลาส .img-fluid เพื่อสร้างภาพที่ตอบสนองทางอึดอัด ภาพจะทำการย่อยยาวอย่างดีในส่วนที่เป็นพ่อเองของภาพ
.img-fluid หมวดคลาสสำหรับภาพแสดง max-width: 100%; และ height: auto; ：
ตัวอย่าง
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- หน้าก่อน BS5 ตาราง
- หน้าต่อไป BS5 Jumbotron
