Search code examples
javascriptjquerycssmedia-queries

scale image 80% - jquery

Im using media queries to make the text and layout (margins, padding, ect) on my website responsive..

ive set it to "if browser window < 1300px" then change all the measures to 80%. This all works fine, but my images aren't responsive, is there a way to set something similar on my images using jquery to make the img width 80% of its full size (to be in proportion with the rest of the scaled page ?)

the media query im using is :

@media only screen 
  and (max-width : 1300px) {
    /* new css */
  }
Solution

  • The following will scale img elements to 80% if the screen width is less than 1300px:

    if ($(window).outerWidth() < 1300) {
    $('img').each(function(){
        $(this).width ( $(this).width () * 0.8) );
        $(this).height( $(this).height() * 0.8) );
    });
}