ການສິ່ງວິຊາ Bootstrap 5 Image
- ບ່ອນໜ້າໜ້າໜ້າຫລັງ BS5 ກາງຕາຕະລາງ
- ບ່ອນໜ້າໜ້າຫລັງ BS5 Jumbotron
ຮູບຮູບພາບ
ພາບສະແດງທີ່ມີວົງ
.rounded ປະເພດເວັບໄຊສະແດງພາບ
ຕົວຢ່າງ
<img src="flower.jpg" class="rounded" alt="Flower">
ພາບສະແດງທີ່ມີວົງທີ່ກວດກວ້າງ
.rounded-circle ປະເພດເວັບໄຊສະແດງພາບ
ຕົວຢ່າງ
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
ພາບສະແດງທີ່ມີວົງຂອງກາງ
.img-thumbnail ປະເພດເວັບໄຊສະແດງພາບ
ຕົວຢ່າງ
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
ການຕິດຕັ້ງພາບ
ການຕິດຕັ້ງ ການຕິດຕັ້ງພາບ ປະເພດເວັບໄຊສະແດງພາບ .float-end ການພັດທະນາທີ່ຕາມກັນ
ຕົວຢ່າງ
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
ພາບຢູ່ທາງກາງ
ເພື່ອເຮັດໃຫ້ພາບຢູ່ທາງກາງ ພວກເຮົາໄດ້ໃສ່ພາບກັບເວັບໄຊສະໜອງທີ່ມີຄວາມສາມາດ. .mx-auto (margin:auto) ແລະ .d-block (display:block)：
ຕົວຢ່າງ
<img src="tulip.jpg" class="mx-auto d-block">
ພາບສະແດງທີ່ສາມາດພັດທະນາ
ພາບມີຈຳນວນຂະໜາດຫລາຍ. ໜ້າຈໍາກາຮູບມີຈຳນວນຫລາຍກວ່ານັ້ນ. ພາບສະແດງທີ່ສາມາດພັດທະນາຄວາມກວດສອບຄວາມສາມາດພາຍໃນຈຳນວນຂະໜາດຂອງຈໍາກາຮູບ.
ຜ່ານການໃສ່ .img-fluid ຕື່ມປະເພດເວັບໄຊສະແດງພາບ <img> ເພື່ອສ້າງພາບສະແດງທີ່ສາມາດພັດທະນາຄວາມກວດສອບຄວາມສາມາດຂອງພາບພາຍໃນປະກອບພາບ. ພາບຈະຖືກພັດທະນາຄວາມກວດສອບຄວາມສາມາດພາຍໃນປະກອບພາບ.
.img-fluid ປະເພດເວັບໄຊສະແດງພາບມີພາບຈັກພາບລະອຽດ max-width: 100%; ແລະ height: auto; ：
ຕົວຢ່າງ
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- ບ່ອນໜ້າໜ້າໜ້າຫລັງ BS5 ກາງຕາຕະລາງ
- ບ່ອນໜ້າໜ້າຫລັງ BS5 Jumbotron
