Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release： 2016-05-16 17:56:40
Original
1133 people have browsed it

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]

Related labels：
Auto scaling
source：php.cn
Previous article：ASP.NET jQuery Example 9 Using the control hyperlink to achieve the return to top effect_jquery Next article：ASP.NET jQuery Example 8 (Dynamicly Add Content to DropDownList)_jquery
Statement of this Website
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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
Select woocommerce related products using custom taxonomy with 3 level hierarchy I have a woocommerce store with a custom classification of "Sports". The classif...
From 2024-04-06 20:05:30
0
1
544
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
React Three Fiber: Why are my scroll events lagging? In ReactThreeFiber, I have a React component that generates a sprite that I want to persis...
From 2024-04-06 13:39:24
0
1
410
How to add correct type for ColumnSlots body function from PrimeVue This is PrimeVueColumnSlots (shortened) exportinterfaceColumnSlots{/***Custombodytemplate....
From 2024-04-06 11:50:20
0
1
526
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template