Resize an image height dynamically according to viewport width

Question

How can I use jQuery to dynamically change the height of an image using the width of viewport.

For a example

When website width is 450px i want to change image width from 300 to 100.

Also I'm using timthumb to resize my images.

HTML code

<img src="timthumb.php?src=myimage.jpg&amp;h=300&amp;w=750&amp;q=100" class="MyImages">

How can I use jQuery to do this?

Answer 1

This should work. Just add the src-attribute after jQuery gets the viewport width and update it on window resize.

<img id="img1" src="" class="MyImages">
<script type="text/javascript">
$(function() {
  update_image();
  $( window ).resize(function() {
    update_image();
  });
});
function update_image(){
  var width = $( window ).width();
  if(width<450) { var picwidth=100; } else { var picwidth=300; }
  $('#img1').attr('src','timthumb.php?src=myimage.jpg&h=300w='+picwidth+'&q=100');
}
</script> 

To answer your question: Edit your images to look like this:

<img src="" class="MyImages" data-src="myimage.jpg">

Now you get the right sizes using jQuery:

<script type="text/javascript">
$(function() {
  $('img').each(function(){
    update_image(this);
  });
  $( window ).resize(function() {
    $('img').each(function(){
      update_image(this);
    });
  });
});
function update_image(e){
  var width = $( window ).width();
  if(width<450) { var picheight=100; } else { var picheight=300; }
  var image = $(e).attr('data-src');
  $(e).attr('src','timthumb.php?src='+image+'&h='+picheight+'&q=100');
}
</script> 

Like this all your images are updated when you resize the viewport.

Answer 2

you can write CSS3 media queries if you don't compatibility of CSS2 based old browsers (like IE7).

for Eg:

@media (max-width: 450px) {
    .MyImages{width:100px;}
}

if you want pure javascript / jQuery based solution:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

$(function(){
   if(viewport().width<=450){
     $(".MyImages").css("width":"100px");
   }
});

if you want to make sure it should work even on browser resize:

$(window).on("resize",function(){
   if(viewport().width<=450){
     $(".MyImages").css("width":"100px");
   }
});

Caution: JavaScript way is more expensive than CSS3 solution on Browser.

Answer 3

You don't need jQuery for that. Just set the width and height property of your image to the values you want it to be:

 <img src="myimage.jpg" id="varimage" width="100" height="200">

 ....


 var img = getElementById("varimage");
 img.height = 400;
 img.width = 200;

and jQuery (as that's what you asked for):

 $("#varimage").width(400);
 $("#varimage").height(200);