Sharing css and js code for automatic scaling of images compatible with IE and Firefox_Image special effects

Requirements: Image width<=330px, height<=150.
1. Use max-width and max-height to automatically scale the image in equal proportions. Code:

Copy the code The code is as follows :

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

Since ie6 does not support css max-width, max-height, so in ie6 You need to use javascript script to control the size.
2. Use javascript script to be compatible with ie6. The code is as follows:

Copy the code 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.css is KISSY.DOM.css, which refers to the DOM method in the kissy class library]

[Note 2: The page that uses javascript to control the size of the image must wait until the image is completely Loaded, so the code must be included in the window.onload event. If the image loading speed is very slow, there may be a small flaw]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn