Merhaba, arkadaşlar bu dersimizde Bootstrap 3’de Responsive resimleri nasıl ekleyeceğimizi öğreneceğiz. O halde hemen başlayalım. 🙂
Dikkat!:
Bir resimin responsive olması için img etiketinin class kısmına “img-responsive” class’ını eklememiz yeterli olacaktır. Aksi taktirde resim responsive olmayacaktır. Yani şöyle olacak;
<img src="resim.jpg" class="img-responsive">
Dikkat bilgimizide verdikten sonra bootstrap’ın Resimler ile ilgili diğer class’larına geçebiliriz.
Resimin Köşelerini Kavisli Yapalım
Resimin köşelerini kavisli yapmak için “img-rounded” class’ını img tagının class kısmına ekleyelim.
Kodumuz şöyle olacak;
<img class="img-responsive img-rounded" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.
Çıktımız ise şöyle olacak;
Resimi Oval Şeklinde Yapalım
Resimi oval şeklinde yapmak için “img-circle” class’ını img etiketinin class kısmına ekleyelim.
Kodumuz şöyle olacak;
<img class="img-responsive img-circle" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.
Çıktı Şöyle Olacak;
Resime Çerçeve Eklemek İçin
Resime çerçeve eklemek için ise “img-thumbnail” class’ını img tagının class kısmına ekleyelim.
Kodumuz şöyle olacak;
<img class="img-responsive img-thumbnail" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.
Çıktımız İse Şöyle Olacak;
Ben sadece resimi responsive (duyarlı) yapmak istiyorum diyorsanız yazımın en başındaki Dikkat kısmını okumanız yeterlidir.
Dersimizin sonuna geldik arkadaşlar kendinize iyi bakın. 🙂