CODEWITHSUNDEEP
javascriptjquerycssmedia-queries
sam
sam

Reputation: 10094

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

Upvotes: 1

Views: 5280

Answers (4)

OpherV
OpherV

Reputation: 6947

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

Upvotes: 2

sam
sam

Reputation: 10094

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.net/qEf5J/

Upvotes: 0

Jacob VanScoy
Jacob VanScoy

Reputation: 1168

This is similar to Aaron's answer, but I think it accomplishes 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%');
}

Upvotes: 2

Aaron Blenkush
Aaron Blenkush

Reputation: 3059

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

Upvotes: 2

Related Questions