调整浏览器窗口大小时更改图像

Question

I have a slideshow on my home page that uses images in a landscape orientation. However, when the browser is resized, the images eventually get clipped. To prevent this, I want to swap the landscape-oriented images to square ones when the browser reaches a certain pixel width. But it must switch back when expanded again. How would I go about this?

Answer 1

jQuery provides this resize event , And you can use it like,

$(function() {
   $(window).resize(function() {
      var width = $(window).width();
      var height = $(window).height();

      $('yourimage').attr('src', toAnotherSource);
      // or you can do anything with the image here.
   });
});