Sharing css and js code for automatic scaling of images compatible with ie and firefox_javascript skills

This function is mainly to solve the problem that the pictures in the content page are too large and stretch out, causing the page to be ugly. You need such code. Friends who need it can refer to it

Requirements: picture width<=600px, height<=800 .

1. Use max-width, max-height to automatically scale the image in equal proportions

Code:

Copy code The code is as follows:

img{max-width: 600px;max-height: 800px;}

Since ie6 does not support css max-width, max-height, you need to use javascript script to control the size in ie6.

2. Use javascript script to be compatible with ie6, the code is as follows:

Copy 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: Use JavaScript to control the size of the image. The page 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]

So we can combine these two together. Use css first and then add js later.

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