JS+CSS Picture Auto Scale adaptive size _javascript tips

Source: Internet
Author: User
I have added CSS restrictions:
Copy Code code as follows:

div img {} {
max-width:600px;
width:600px;
Width:expression (document.body.clientwidth>600?) 600px ":" Auto ");
Overflow:hidden;
}

max-width:600px; In IE7, FF and other non IE browsers, the maximum width of 600px. However, it is not valid in IE6.
width:600px; The size of the picture in all browsers is 600px;
When the picture size is greater than 600px, it is automatically reduced to 600px. Valid in IE6.
Overflow:hidden; Beyond the part of the hidden, to avoid control of the image size failure caused by the distraction deformation.
On the page where you put the picture.
Copy Code code as follows:

<script language= "JavaScript" >
var imgobj;
for (i = 0; i < document. getElementsByTagName ("img"). length; i++)
{
Imgobj = document. getElementsByTagName ("img") [i];
It is recommended to judge only the height or width of one of them, which can be scaled automatically proportionally
if (imgobj. Width > 500)//judge the width of the picture, if greater than 700, set to 700, the value can be modified by itself
{
Imgobj. width = 500
}
if (imgobj. Height > 700)//judge the height of the picture, if greater than 700, set to 700, the value can be modified by itself
{
Imgobj. Height = 700
}
}
</script>

Separate picture control, with this:
Copy Code code as follows:

<script>
var Abc=document.getelementbyid ("abc");
var imgs=abc.getelementsbytagname ("img");
for (Var i=0,g;g=imgs[i];i++)
G.onload=function () {if (this.width>300) {this.width=300}else{if (this.height>300) this.height=300}}
</script>

Tests are passed under IE and ff.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.