Css and js Code with auto scaling compatible with images of ie and firefox _ image effects

Source: Internet
Author: User
This function is mainly used to solve the problem of too many images on the content page, which makes the page ugly and requires such code. If you need this code, you can refer to the following requirement: image width <= 330px, height <= 150.
1. Use max-width and max-height to scale the image according to the following code:

The Code is as follows:


Img {max-width: 330px; max-height: 150px ;}


Because ie6 does not support css max-width and max-height, you need to use javascript scripts to control the size in ie6.
2. Use javascript scripts to be compatible with ie6. The Code is as follows:

The Code is as follows:


Var img_width = img. OffsetWidth;
Var img_height = OffsetHeight;
Var current_w = (150 * img_width)/img_height;
Var current_h = (330 * img_height)/img_width;
'If (img_height> 150 ){
'If (img_width> 330 ){
D.css (img ,{
Width: 330 + "px ",
Height: current_h + "px"
})
} Else {
D.css (img ,{
Width: current_w + "px ",
Height: 150 + "px"
})
}
} Else {
'If (img_width> 330 ){
D.css (img ,{
Width: 330 + "px ",
Height: current_h + "px"
})
} Else {
D.css (img ,{
Width: img_width + "px ",
Height: img_height + "px"
})
}
}


[NOTE 1: d.cssuses kissy.dom.css to reference the DOM method in the kissy class library]

[NOTE 2: To use javascript to control the size of an image page, you must wait until the image is fully loaded. Therefore, the Code must be included in the window. in the onload event, if the image loading speed is slow, there may be a small defect]
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.