PHP | Jquery | Css | Codeigniter | Unity3D


CSS content kullanarak resim yolu eklemekWeb sayfanızda kullandığınız resim etiketlerine verdiğiniz resim yolunu (src) css content kodu kullanarak da verebilirsiniz. Bu kodu neden kullanırım diye sorabilirsiniz. Aslında ilk baktığınızda işi uzatmak gibi düşünebilirsiniz.

Css media query kullanrak responsive(mobil uyumlu) bir web sayfası tasarladığınızı düşünelim. SAyfanızın görüntülendiği çözünürlük azaldıkça sayfanızı daraltmanız, yapıyı mobil uyumlu hale getirmeniz gerekir. Dolayısıyla sayfanızda kullandığınız yazılarla resimler de küçülecektir. Yazıları boyut olarak değil, yazıyı kapsayan elementi daraltmak yöntemiyle yazıların aşağı kayıp yine okunmasını sağlayabilirsiniz.

Resimleri de yukarıda anlattığım şekilde küçültebilirsiniz ancak bazı resimleri küçültürseniz anlaşılırlığı düşebilir veya üzerinde yazı veya slogan olan bir görsel kullanıyorsanız bunu yapamazsınız. Bunun yerine, sayfa daraldıkça çözünürlüğe uygun, daha küçük boyutta hazırlanmış başka bir görseli kullanabilirsiniz.

Tüm bunları yapabilmeniz için css media query kullanabilirsiniz. Css kullanarak çözünürlüğe uygun resimin değişmesini, daha farklı boyutta hazırlanmış bir dosyanın görüntülenmesini isteyebilirsiniz. Bu durumda css içerisinde kullandığınız media query koşulları içinde resim dosyalarınızın içeriğini, yolunu dinamik olarak değiştirebilmeniz gerekir. Farklı yollardan da yapabilirsiniz ancak bu yöntemi kullanırsanız çok esnek ve kolay bir şekilde resimleri responsive hale getirebilirsiniz. Her çözünürlük kademesinde farklı bir resim dosyasını kullanabilirsiniz.


  <style type="text/css" >

   .my-class{

      content:url("http://www.gencprogramci.net/images/holmes3.png"); // Resim yolu
    }
  
  </style>

  <img class="my-class"/>


Mutlu, onurlu kalın.



Soru ve Tartışma Konularınız için;

Yayınlayan
Yazar: Windofelm
Description: Oluşturduğunuz img etiketinin resim yolunu css content kodu kullanarak dinamik olarak verebilirsiniz.