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 */
  }

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 */
  }

• javascript
• jquery
• css
• media-queries

• Why not add the image's css into that same css rule?? If you're hard coding the size in the image tag... don't – d-_-b Commented Mar 15, 2013 at 17:55
• @iight - i cant add the images css, as the image width is set in the html width="" attribute. Although i am hard coding the other css, font sizes, padding ect.. is there another way ? – sam Commented Mar 15, 2013 at 18:01

4 Answers 4

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) );
    });
}

This is similar to Aaron's answer, but I think it acplishes something different since it makes it proportional to the size of the window, but it is not always 80% of its full size.

if ($(window).outerWidth() < 1300) {
  $('img').css('width', '80%');
}

Too bad your image widths are defined by attributes and not by CSS :(

Using a JS solution for something so inherently CSS\design related feels wrong to me. How about using a pure CSS solution? Here are some ideas:

Method 1

Override your hard coded image attributes with hardcoded image css. jsfiddle

@media only screen 
  and (max-width : 1300px) {

    img.pasta{
        width: 250px;
        height: 300px;
    }

    img.pizza{
        width: 450px;
        height: 200px;
    }

  }

Method 2

Use css to have images expand to their container dimensions. This will ensure the image expands while maintaining aspect ratio

img{
    max-width: 100%;
    max-height: 100%;
}


@media only screen 
  and (max-width : 1300px) {

    .image_container{
        /* lets say that 300px is the "80%" of normal size */
        width: 300px;
     }

  }

Method 3

Get creative and use CSS transformation to scale down the images, without changing their width or height

@media only screen 
  and (max-width : 1300px) {
    img{
        -webkit-transform: scale(0.8);  /* Saf3.1+, Chrome */
        -moz-transform: scale(0.8);  /* FF3.5+ */
        -ms-transform: scale(0.8);  /* IE9 */
        -o-transform: scale(0.8);  /* Opera 10.5+ */
         transform: scale(0.8);
    }
  }

Ive been playing arround with this for a while and found an alternative using media queries and css, using img {max-width: 100%;} - no js.. have a look here for the jsfiddle - http://jsfiddle/qEf5J/