Using CSS to achieve proportional scaling of pictures

With the growth of smartphones, mobile web sites can also do more personalized, recently in the revision of their own mobile website
This one, encountered a website picture size problem, mobile phone screen is relatively small, how to upload the rules of the picture on the phone show more beautiful?
Then use the powerful features of CSS.
First enclose the code:
IMG {
max-width:500px;
Myimg:expression (Onload=function () {
This.style.width= (This.offsetwidth > 500)? " 500px ":" Auto "}
);
}
Let's analyze some of these numbers.
This set the maximum size is 500px, more than 500px automatically proportional to the reduction to 500px
The above code may not be effective in some browsers, such as the existence of a highly automatic scaling problems
Then you can try the following code
We attach a piece of code that is valid for the overall situation, if it is for the body content, add a limit before the img
For example I write below, otherwise may cause the logo and so on picture distortion
. Context img{
max-width:500px;
IE7, FF and other non-IE browsers the maximum width of 500px;
width:500px;
The size of the picture in all browsers is 500px;
Width:expression (document.body.clientwidth>300?) 300px ":" Auto ");
When the picture size is greater than 500px, automatically reduced to 500px;
Overflow:hidden;
}