Bootstrap 5 kuvat

Kurssivihjeet：

Kuvan muoto

Pyöristykset .rounded

Esimerkki

Luokka lisää pyöristyksen kuvan ympärille:

Kokeile itse

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

Pyöreä .rounded-circle

Esimerkki

Luokka muotoilee kuvan pyöreäksi:

Kokeile itse

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

Pienoiskuva .img-thumbnail

Esimerkki

Luokka muotoilee kuvan piirteeksi (reunallisesti):

Kokeile itse

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

Tasapainota kuvaa .float-start Luokka vie kuvan vasemmalle, tai käytä .float-end Oikealle liikkuvuus：

Esimerkki

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

Kokeile itse

Keskitetty kuva

Jotta kuva keskittyy, lisäämme kuvaan utility-luokan .mx-auto (margin:auto) ja .d-block (display:block)：

Esimerkki

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

Kokeile itse

Responsiiviset kuvat

Kuvilla on erilaisia koolia. Näytöllä on myös erilaisia koolia. Responsiiviset kuvat mukautuvat automaattisesti näytön kohtaan.

Lisäämällä .img-fluid Lisää luokka <img> Tee responsiivinen kuva lisäämällä tätä luokkaa. Tämän jälkeen kuva skaalautuu hyvin isäntäelementtiin.

.img-fluid Lisää luokka kuvaa max-width: 100%; ja height: auto; ：

Esimerkki

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

Kokeile itse