Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Javascript Image proportional zoom-in and zoom-out Ken center div</title><style type="text/css">Body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em {margin: 0; padding: 0; border: 0;} ul, ol, li {list-style: none;} input, button {margin: 0; font-size: 12px; vertical-align: middle;} body {font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0 auto;} table {border-collapse: collapse; border-spacing: 0;} a {color: #333; text-decoration: none;} a: hover {color: # ef9b11; text-decoration: underline;} em {font-style: normal;} # wrap {width: 670px; margin: 20px auto ;}. box-163css {width: 640px; padding: 15px 10px; float: left; border: 1px solid # ccc ;}. box-163css dl {position: relative; width: 160px; height: 175px; float: left ;}. box-163css dd {text-align: center; position: absolute; left: 0; bottom: 0 ;}. box-163css dd img {border: 1px solid # ddd; padding: 2px ;}</style><script language="javascript">// Image Display size [width and height at the same time] function DrawImage (imgObj, widthValue, heightValue) {var Image = new image (); image. src = imgObj. src; if (image. width> 0 & image. height> 0) {if (image. height> heightValue | image. width> widthValue) {var h = 0, w, wflg = false; if (image. height> heightValue) wflg = true; if (wflg) {w = widthValue; h = (image. height * widthValue)/image. width;} if (h = 0 | h> heightValue) {h = heightValue; w = (image. width * heightValue )/ Image. height;} // alert (w) // alert (h) imgObj. width = w; imgObj. height = h;} else {imgObj. width = image. width; imgObj. height = image. height ;}}/ ** center the image vertically. Prerequisites: The current image must be included in the div * ImgD: source image * maxWidth: maximum allowed width (that is, the width of the parent node object of the div that contains the image, which is generally li) * maxHeight: maximum allowed height */function centerImage (imgD, maxWidth, maxHeight) {var div = imgD. parentNode; // Obtain the div if (imgD. height <maxHeight) {var top = (maxHeight-imgD. height)/2; div. style. marginTop = top + "px";} if (imgD. width <maxWidth) {var left = (maxWidth-imgD. width)/2; div. style. marginLeft = left + "px ";}}</script></pead><body><div id="wrap"><div class="box-163css"><p>Scale up or down images</p><dl><dd><a ></dd></dl><dl><dd><a ></dd></dl><dl><dd><a ></dd></dl></div></div></body></ptml></td> </tr></table>
Tip: you can modify some code before running
