js控制图片高度、宽度

JavaScript08

js控制图片高度、宽度,第1张

//给你一个比较灵活的，可自由控制

jQuery(window).load(function () {

jQuery(".div1 img").each(function () {//div1下的img宽度、高度设置

DrawImage(this, 700, 470)//宽700，高470，自己改为相同即可。

})

})

function DrawImage(ImgD, FitWidth, FitHeight) {//下面是判断，可自己修改条件

var image = new Image()

image.src = ImgD.src

if (image.width > 0 && image.height > 0) {

if (image.width / image.height >= FitWidth / FitHeight) {

if (image.width > FitWidth) {

ImgD.width = FitWidth

ImgD.height = (image.height * FitWidth) / image.width

}else {

ImgD.width = image.width

ImgD.height = image.height

}

} else {

if (image.height > FitHeight) {

ImgD.height = FitHeight

ImgD.width = (image.width * FitHeight) / image.height

} else {

ImgD.width = image.width

ImgD.height = image.height

}

}

}

}

控制图片最大宽度和高高度，在css里面有max-width、max-height的属性，非要用js也不是不可以的，document.getElementById('id').style.maxWidth。这个属性ie6支持的不好。但是现在也不用兼容ie6了吧。如果你想宽图用最大宽度，竖图用最大高度的好，那你就加一个判断的语句再决定是max-width、还是max-height.

这是img标签的特性决定的，如果width和height属性只设置其中一个，另一个会自动等比例缩放，也就是说图片会自动保持其原始的宽高比，只有width和height同时设置，图片才会产生压扁或拉高的变形效果。