BS5 rasmlar
Rasm shakllari
Yumaloq burchaklar:
Doira:
Eskiz (thumbnail):
Yumaloq burchaklar
.rounded klassi rasmga yumaloq burchaklar qo‘shadi:
Doira
.rounded-circle klassi rasmni doira shakliga keltiradi:
Misol
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
O‘zingiz sinab ko‘ring »
Eskiz (thumbnail)
.img-thumbnail klassi rasmni eskiz (thumbnail) ko‘rinishiga keltiradi (chegara bilan):
Rasmlarni tekislash
Rasmni .float-start klassi yordamida chapga yoki .float-end yordamida o‘ngga joylashtiring (float):
Misol
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
O‘zingiz sinab ko‘ring »
Markazga joylashtirilgan rasm
Rasmga .mx-auto (margin:auto) va .d-block (display:block) yordamchi klasslarini qo‘shib, uni markazga joylashtiring:
Moslashuvchan rasmlar
Rasmlar turli o‘lchamlarda bo‘ladi. Ekranlar ham. Moslashuvchan rasmlar ekran o‘lchamiga avtomatik ravishda moslashadi.
Moslashuvchan rasmlar yaratish uchun <img> tegiga .img-fluid klassini qo‘shing. Shunda rasm ota element o‘lchamiga chiroyli tarzda moslashadi.
.img-fluid klassi rasmga max-width: 100%; va height: auto; ni qo‘llaydi:
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!