Image ng Bootstrap 5

Paggamit na Kurso

Rekomendasyon ng Kurso:

Palamuti ng hugis ng imahe .rounded

Example

Ang klase na .rounded ay magdagdag ng palamuti sa imahe:

Try It Yourself

<img src="flower.jpg" class="rounded" alt="Flower">

Bilog .rounded-circle

Example

Ang klase na .rounded-circle ay magpalipat ng imahe bilang bilog:

Try It Yourself

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail .img-thumbnail

Example

Ang klase na .img-thumbnail ay magpalipat ng imahe bilang thumbnail (may border):

Try It Yourself

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Para alinlangan ang imahe .float-start Ang klase na .float-end ay maglalagay ng imahe sa kaliwa, o gamit ang .float-end Magkalat sa kanan:

Example

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Try It Yourself

Centered Image

Para mapanatili ang sentro ng imahe, ginagamit namin ang utility klase sa pamamagitan ng pagdagdag ng utility klase sa imahe. .mx-auto (margin:auto) at .d-block (display:block):

Example

<img src="tulip.jpg" class="mx-auto d-block">

Try It Yourself

Responsive Image

Ang imahe ay may iba't ibang laki. Ang screen din. Ang responsive image ay magiging ayos nang awtomatiko para magkasya sa laki ng screen.

Sa pamamagitan ng pagdagdag ng .img-fluid Magdagdag ng klase <img> Gamit ang tag na .img-fluid upang lumikha ng responsive image. Pagkatapos, ang image ay mababagtas nang mahusay sa loob ng magulang na elemento.

.img-fluid Anugang para sa paggamit ng imahe max-width: 100%; at height: auto; :

Example

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Try It Yourself