javascript implementation code for proportional scaling of images in a specified area Script House Integrated Version [Original]

javascript implementation code for proportional scaling of images in a specified area Script House Integrated Version [Original]_Image Special Effects

WBOY

Release： 2016-05-16 18:43:33

Original

1295 people have browsed it

Script House integration article, welcome to reprint.

Copy code The code is as follows:

function controlImg(ele,w,h){
var c=ele.getElementsByTagName("img");
for(var i=0;ivar w0=c[i].clientWidth,h0=c[i ].clientHeight;
var t1=w0/w,t2=h0/h;
if(t1>1||t2>1){
c[i].width=Math.floor(w0 /(t1>t2?t1:t2));
c[i].height=Math.floor(h0/(t1>t2?t1:t2));
if(document.all){
c[i].outerHTML='' c[i].outerHTML '< ;/a>'
}
else{
c[i].title="Open image in new window";
c[i].onclick=function(e){window.open (this.src)}
}
}
}
}
window.onload=function(){
controlImg(document.getElementById("content"),670,980);
}

This kind of code was needed before, but because the specific idea was not very clear, I have compiled the article I saw in blueidea today.
Images in the specified area are generally used to control the content part. The content in controlImg(document.getElementById("content"),670,980); is used. The following is the test code.

<img  src="http://www.jb51.net/images/logo.gif" alt="javascript implementation code for proportional scaling of images in a specified area Script House Integrated Version [Original]_Image Special Effects" >
<div id="dxy">
Below are the areas to control. 
<center>
Original image <img alt="photoshop 图片调色教程 苍白皮肤的冷酷美女"    style="max-width:90%"  style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206868.jpg">
</center>
<center>
Tutorial layer:
1. Open the original image and make a copy
2. Execute Layer <New Adjustment Layer<Hue/Saturation Parameters are not explained.
3. Execute Layer <New Adjustment Layer<Curve
4. Remove the color and then lower the opacity
5. Execute layer <New adjustment layer<Brightness/Contrast <img alt='photoshop 图片调色教程 苍白皮肤的冷酷美女'    style="max-width:90%"  style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206969.jpg" /></center></div>
<center>
Here are the areas that do not need to be controlled, you can refer to them. 
Original image <img alt='photoshop 图片调色教程 苍白皮肤的冷酷美女'    style="max-width:90%"  style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206868.jpg" /></center><center>
Tutorial layer:
1. Open the original image and make a copy
2. Execute Layer <New Adjustment Layer<Hue/Saturation Parameters are not explained.
3. Execute Layer <New Adjustment Layer<Curve
4. Remove the color and then lower the opacity
5. Execute layer <New adjustment layer<Brightness/Contrast <img alt='photoshop 图片调色教程 苍白皮肤的冷酷美女'    style="max-width:90%"  style="max-width:90%" src="http://files.jb51.net/file_images/photoshop/200910/200910241416206969.jpg" /></center></body>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The following is used The method of implementing css expression will increase the load on the client. It is recommended to use js's
. Suppose there is a div with an id of test. How to control whether the pictures inside it will be stretched?
Just define the CSS as follows:

Copy the code

The code is as follows:

 
　#test IMG { 
 border:0; 
 margin:0; 
 padding:0; 
 max-width:600px; 
 width:expression(this.width>600?"600px":this. width); 
 max-height:450px; 
 height:expression(this.height>450?"450px":this.height); 
　} 