Bootstrap, görsellerinizi responsive (duyarlı) hale getirmek ve şık bir görünüm kazandırmak için çeşitli sınıflar sunar. Bu sınıflar sayesinde resimleriniz cihaz ekran boyutlarına uyum sağlar ve estetik bir şekilde sergilenir.
Resimlere Duyarlılık Eklemek
Resimleri cihaz ekran boyutlarına uygun hale getirmek için img-fluid sınıfı kullanılır. Bu sınıf, resmin genişliğini kapsayıcı öğenin genişliğiyle sınırlar ve yüksekliği otomatik olarak ölçeklendirir.
Örnek:
<img src="example.jpg" class="img-fluid" alt="Responsive Image">
Bootstrap Resim Sınıfları
| Sınıf | Açıklama |
|---|---|
.img-fluid | Resmi, kapsayıcı öğenin genişliğine göre ölçekler (responsive yapar). |
.img-thumbnail | Resme küçük bir çerçeve ekler, genellikle profil resimleri için kullanılır. |
.rounded | Resim köşelerini yuvarlak hale getirir. |
.rounded-circle | Resmi tam bir daire şeklinde gösterir. |
.float-start | Resmi sola yaslar (metin etrafında dolaşır). |
.float-end | Resmi sağa yaslar (metin etrafında dolaşır). |
.mx-auto | Resmi ortalar (kapsayıcı blok ile birlikte). |
Sık Kullanılan Örnekler
Duyarlı (Responsive) Resim
Bir resmin, tüm cihazlarda düzgün görünmesi için img-fluid sınıfı eklenir.
<img src="example.jpg" class="img-fluid" alt="Responsive Image">
Küçük Çerçeveli Resim (.img-thumbnail)
Resmi çerçeveli ve hafif gölgeli hale getirir.
<img src="example.jpg" class="img-thumbnail" alt="Thumbnail Image">
Yuvarlak Köşeli Resim (.rounded)
Resim köşelerini yumuşak bir şekilde yuvarlatır.
<img src="example.jpg" class="img-fluid rounded" alt="Rounded Image">
Daire Şeklinde Resim (.rounded-circle)
Resmi tam bir daire haline getirir.
<img src="example.jpg" class="img-fluid rounded-circle" alt="Circle Image">
Metinle Hizalanan Resimler
Resimlerinizin metinle hizalanmasını sağlamak için float-start (sola hizalama) veya float-end (sağa hizalama) sınıflarını kullanabilirsiniz.
Sola Yaslanmış Resim:
<img src="example.jpg" class="float-start img-thumbnail" alt="Left Aligned">
<p>Bu paragraf bir resmi solda hizalamak için kullanılan float-start sınıfıyla hizalanmıştır.</p>
Sağa Yaslanmış Resim:
<img src="example.jpg" class="float-end img-thumbnail" alt="Right Aligned">
<p>Bu paragraf bir resmi sağda hizalamak için kullanılan float-end sınıfıyla hizalanmıştır.</p>
Ortalanmış Resim
d-block ve mx-auto sınıflarını kullanarak resmi yatayda ortalayabilirsiniz.
<img src="example.jpg" class="d-block mx-auto img-fluid" alt="Centered Image">
Resim Oranlarını Koruma
Bootstrap ile resimlerinizin en boy oranlarını bozmadan kapsayıcı bir öğeye yerleştirmek için ek sınıflar da kullanabilirsiniz. Örneğin, aspect-ratio sınıfı ile sabit oranlar oluşturabilirsiniz.
Örnek:
<div class="ratio ratio-16x9">
<img src="example.jpg" class="img-fluid" alt="16:9 Aspect Ratio">
</div>
Bootstrap Resimlerin Avantajları
- Responsive Tasarım: Tüm cihazlarda otomatik ölçekleme.
- Kolay Kullanım: Sadece birkaç sınıf ekleyerek farklı tasarımlar oluşturma.
- Görsellik: Thumbnail, yuvarlak köşeler ve daire gibi stillerle estetik sunar.
- Uyumlu Hizalama: Metinle hizalama ve kolay yerleştirme.