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.