Adjusting the image size to the screen size

You can find the screen size in pixels using html, Css and jquery and adjust the size of objects in various resolutions.
<!--We created an image tag and assigned a class to it-->
<img class="image" src="img/picture.jpg" alt="pic name" >

<!--You can first determine the screen size through the class we define and then give the height to that size using the jquery if else method.-->
<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>
You can add a requirement of whatever width you want.
E.Albayrak

0 Yorum

Soru & Yorum


Web Tasarım

Renkli Kare

Web Tasarım Ajansı