Önyükleme 4 Görüntü
Önyükleme 4 Görüntü Şekilleri
Yuvarlatılmış köşeler:
Daire:
Küçük resim:
Yuvarlatılmış köşeler
Sınıf .rounded, bir görüntüye yuvarlatılmış köşeler ekler:
Örnek
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Daire
Sınıf .rounded-circle, görüntüyü bir daire şeklinde şekillendirir:
Örnek
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
küçük resim
Sınıf .img-thumbnail, görüntüyü küçük resim (kenarlıklı) olarak şekillendirir:
Örnek
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Görüntüleri Hizalama
Bir görüntüyü .float-rightsınıfla sağa veya aşağıdakilerle sola kaydırın .float-left:
Örnek
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Ortalanmış Görüntü
.mx-autoGörüntüye yardımcı program sınıflarını (margin:auto) ve .d-block(display:block) ekleyerek görüntüyü ortalayın:
Örnek
<img src="paris.jpg" class="mx-auto d-block">
Duyarlı Görüntüler
Görüntüler her boyutta gelir. Ekranlar da öyle. Duyarlı görüntüler ekranın boyutuna uyacak şekilde otomatik olarak ayarlanır.
Etikete bir .img-fluidsınıf ekleyerek duyarlı görüntüler oluşturun . <img>Görüntü daha sonra ana öğeye güzel bir şekilde ölçeklenir.
Sınıf .img-fluidgeçerlidir max-width: 100%;ve
height: auto;görüntüye:
Örnek
<img class="img-fluid" src="img_chania.jpg" alt="Chania">