Ekran boyutuna göre resimlerin boyutunu ayarlamak

Merhaba arkadaşlar bu gün sizlere;

Html, Css ve jquery kullanarak ekran boyutunu piksel cinsinden bulabilir nesnelerin boyutlarını çeşitli çözünürlüklerde ayarlayabilmeniz için bir kaç satır kod ileteceğim.

 

 

<!--Bir resim etiketi oluşturup buna class atadık-->

<img class="image" src="img/erdogandurmaz.jpg" alt="resim adı" >

<!--Tanımladığımız class üzerinden önce ekran boyutunu tespit edip sonra o boyuta jquery if else yöntemini kullanarak resme yükseklik verebilirsiniz.-->

<script>

function autosize() {

               var windowSize = $(window).width();

               if (windowSize <= 1400) {

                     $(".image").height( 200 ).css({

                             cursor: "auto",

                       });

                }

                    else if (windowSize >= 1400) {

                         $(".image").height( 280 ).css({

                         cursor: "auto",

                      });

              } 

     }

                     // Execute on load

                         autosize();

                    // Bind event listener

                         $(window).resize(autosize);

</script>