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]