Ekran Boyutuna Göre Resim Boyutu Değitirme

Resimleri Ekran Boyutuna Göre Değiştirme

ekrana gore resim degistirme

HTML5 css3 uyumlu bir web sitesi yapıyorsunuz ve resimlerinizin ekran boyutuna göre değişmesini istiyorsunuz. bu iş için biraz kafa yordum birazda araştırma yaptım. aslında php ile deneme yaptım ve olduğunu gördüm fakat her ekran boyutunda aynı standardı yakalayamadım. ama araştırmalarımla ekran boyutuna göre resim değiştirme olayının javascript ile olduğunu gördüğümde sizlerle paylaşmak istedim. Benim tek amacım, benim öğrendiklerimi öğrenmek için harcadığım zamanı başkalarınında harcamamasıdır. paylaşımlarım ve makalelerim o yönde olmuştur ve olacaktır. iyi çalışmalar dilerim.

Gelelim Kodumuza.


<html>
<head></head>
<body>
<div id="bgdiv" style="width:100%;height:100%"></div>
<script language="javascript">
var w = screen.width;
if(w==1920) document.getElementById("bgdiv").style.background = "url(1920x1080.png) center center no-repeat";//1920*1080
else if(w==1600) document.getElementById("bgdiv").style.background = "url(1600x1200.png) center center no-repeat";//1600*1200
else if(w==1280) document.getElementById("bgdiv").style.background = "url(1280x1024.png) center center no-repeat";//1280*1024
/* istediğin kadar arttır */
else document.getElementById("bgdiv").style.background = "url(1280x1024.png) center center no-repeat";//1280*1024

</script>
</body>
</html>

Mesaj 2 Comments

  1. mamo dedi ki:

    Vay be, demek ki ekranın boyutuna göre resimlerin boyutu da değişecek he 😀 Responsive image’ler diyorsunuz yani, kulağa gerçekten hoş geliyor…

  2. Altair dedi ki:

    Teşekkürler, bu kodu hep merak etmiştim ama araştırmak hiç nasip olmadı 😉

Leave A Reply