
Javascript image zoom in out proportionally, width and height will not exceed the specified value
Web pages have size restrictions. The image displayed on the web page cannot exceed its size; if the image exceeds its size, it must be scaled down to ensure that it is not deformed. To achieve it, you can use either Css or javascript. If the webpage is compatible with old browsers(such as IE6), usually use javascript, because IE6 does not support max-width and max-height, use expression() and consume too much resources; use javaScript to write a function to call directly, which is convenient and efficient.
The Method of javascript image zoom in out proportionally, width and height will not exceed the specified value:
w maximum width, h maximum height
function ZoomImage(obj,w,h)
{
var objCon = document.getElementById(obj);
var ImgCell = objCon.getElementsByTagName("img");
for(var i=0;i < ImgCell.length;i++)
{
var ImgWidth = ImgCell(i).width;
var ImgHeight = ImgCell(i).height;
if(ImgWidth > w)
{
var newHeight = w*ImgHeight/ImgWidth;
if(newHeight <= h)
{
ImgCell(i).width = w;
ImgCell(i).height = newHeight;
}
else
{
ImgCell(i).height = h;
ImgCell(i).width = h*ImgWidth/ImgHeight;
}
}
else
{
if(ImgHeight > h)
{
ImgCell(i).height = h;
ImgCell(i).width = h*ImgWidth/ImgHeight;
}
else
{
ImgCell(i).width = ImgWidth;
ImgCell(i).height = ImgHeight;
}
}
}
}
Call:
ZoomImage(parentNode,width,height)
parentNode represents the parent object ID of image;
width represents the width of image;
height represents the height of image.
-
Related Reading
- Javascript multidimensional array (create, add and r
- Javascript trim string whitespace, with removing lef
- Remove text after clicking in the textbox and then d
- Javascript get referrer url(previous page url), curr
- The difference between javascript width and height a
- Javascript get current url, domain from url, relativ
- Javascript convert hex to decimal, binary to hex, oc
- Javascript delay loading images to improve web page
- Remove html element javascript by their parent or cl
- Javascript countdown and redirect after a few second
- Difference between substr and substring in javascrip
- Javascript split usage and examples, with splitting