0

I want to re-size image when resolution change from 960px/1024px(screen) to 768px & 320px, I have changed some image from css with @media and appropriate resolution. I found some technique like data-websrc, also response.js but its really hard to understand so anybody please help me what is the best technique to change image size automatically?

Here is the link for the same http://demo.koruindia.com/kv2/v04/

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Dhaval Shah
  • 1
  • 2
  • Similar question: http://stackoverflow.com/questions/8970521/how-to-not-send-images-to-mobiles-in-a-semantic-manner – user123444555621 Jan 24 '12 at 17:52
  • It is something different from this, he/she has mention a technique, I am looking for the best practice. – Dhaval Shah Jan 25 '12 at 06:11
  • There is no 'best practice'. This is a very fluid area at the moment. There are lots of techniques - pick the one that works for you. Personally, I would go with 'background-size'. – Dan Blows Jan 31 '12 at 12:01

1 Answers1

0

You can use a div with a background-image css style that uses a different image for each resolution @media query.

Michael S. Scherotter
  • 10,715
  • 3
  • 34
  • 57
  • Thanks for the answer, I have done this for the logo, but the thing is it load new image each time, in this project I have more than 500+ images so it is difficult for the same, at this moment I have tried .className img{ max-width: 100%; } it works but I am looking for something different like what I do when I need use inline image only? – Dhaval Shah Jan 25 '12 at 06:13