In the company's work is often to customers for product display of the page, because the customer upload the picture format size, zoom will lead to deformation, so in Sunday, a bit of time, write a JS code, supporting the perfect zoom picture.
First add a <div></div> label to the picture, the IMG can not define height or width, as follows:
<div class= "Product_img_div" ></div> Write code in CSS:. product_img_div {Width:210px;height:190px;overflow:hidden}
The effect is to control the image load, the overflow part hidden, so that the interface will not be too ugly.
Copy Code code as follows:
Resizeimg ("Product_img", 200,180);
function Resizeimg (cname,w,h) {
var Reimgs = document.getelementsbytagname ("img");
for (j=0;j<reimgs.length;j++) {
if (reimgs[j].classname==cname && (reimgs[j].height>h | | reimgs[j].width>w)) {
if (reimgs[j].height==reimgs[j].width) {
Reimgs[j].height=h;reimgs[j].width=w;
else if (reimgs[j].height>reimgs[j].width) {
Reimgs[j].height=h;
else if (reimgs[j].height<reimgs[j].width) {
Reimgs[j].width=w;
}
}
}
}
After the test, the picture size is scaled perfectly, and it solves the problem that the interface will be hard to see when loading.
