Bootstrap 4 ile resimlerimize stil vermek artık çok kolay. Örneğin bir resmi responsive hale getirebilir, tam yuvarlak veya köşelerden yuvarlatılmış bir şekle dönüştürebiliriz. Hem de hiç Css kodu yazmadan. Yapmamız gereken tek şey, resmin src attribute‘una resmin kaynak yolunu yazmak ve bootstrap image class’larını kullanmak. Şimdi bootstrap image class’larının neler olduğuna bakalım.
⇒ Eğer img etiketinin class’ına rounded yazarsak, resmimiz köşelerinden yuvarlatılmış hale gelir.
|
1 2 3 |
<img class="rounded" src="" alt=""> |
Resmimizin görünümü;
Not : Bu class’ı yazdığımızda, aslında resme border-radius : .25rem; değeri uygulanıyor.
⇒ Eğer img etiketinin class’ına rounded-circle yazarsak, resmimiz yuvarlak hale gelir. Resmin genişlik ve yükseklik değeri eşitse, tam yuvarlak olur. Genişlik ve yükseklik değeri farklı ise elips şeklinde olur.
|
1 2 3 |
<img class="rounded-circle" src="" alt=""> |
Resmimizin görünümü;
Not : Bu class’ı yazdığımızda, aslında resme border-radius:50%; değeri uygulanıyor.
⇒ Eğer img etiketinin class’ına img-thumbnail yazarsak, resmimiz thumbnail hale gelir.
|
1 2 3 |
<img class="img-thumbnail" src="" alt=""> |
Resmimizin görünümü;
Not : Burda resme şu özellikler kazandırılıyor:
- 1px’lik kenarlık veriliyor.
- Köşeler hafif yuvarlatılmış hale geliyor.
- Kenarlıklar ile resim arasında mesafe olması için padding (iç boşluk) değeri veriliyor.
Bootstrap 4 ile Responsive Resim Nasıl Yapılır?
⇒ Responsive bir resim elde etmek için yapmamız gereken tek şey, img etiketinin class’ına img-fluid yazmak.
|
1 2 3 |
<img class="img-fluid" src="" alt=""> |
Şimdi tarayıcı boyutunu küçültüp tekrar genişleteceğim.
Gördüğünüz gibi tarayıcı boyutuna göre resmimizin boyutuda değişiyor. Yani img-fluid class’ı ile resmimize responsive özellik kazandırmış oluyoruz.
Responsive tasarım hakkında daha fazla bilgi almak isterseniz Css Dersleri 37 – Responsive Web Tasarım Nedir? yazımı okuyabilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}
sitenizden çok faydalandım. teşekkürler.
Rica ederim. Takipte kalmanız dileğiyle.
Tebrikler. Çok faydalı bilgiler veriyorsunuz.
Bootstrap bir temayı kendime uyarlıyorum. ve ben hiç html bilmiyorum. Epey yol aldım. Ancak temada olmayan birşeyi yapmak istiyorum. Resme tıklayınca yada üzerine gelince orjinal boyuta çıksın büyüsün ve sonra da kapatabileyim açılan resmi. Bu konuda destek rica ediyorum. http://www.nilsen.com.tr yi ben tasarladım. wix ile. Şimdi kodla yapmayı deniyorum.
Öncelikle teşekkürler. Yazılarımın sizin için faydalı olmasına sevindim. Resmin üzerine tıklayınca orjinal boyutuna gelmesi ve sonrasında kapatma ikonuna tıklayınca kapanmasına genelde lightbox tasarımlar diyoruz. Kod bilginiz olmadığı için hazır eklentileri kullanmanızı tavsiye ederim. Örneğin https://lokeshdhakar.com sitesini ziyaret edebilirsiniz. Eklentinin kullanımı da oldukça basit. En kısa zamanda bu eklentinin kullanımı ile ilgili detaylı bir yazı yayınlayacağım. Takipte kalmanız dileğiyle.
İşime yarayacak bilgiler edindim teşekkür ederim.
Rica ederim. İyi çalışmalar.