js 控制图片大小_教程

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：

或者：

当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：

img {max-weight:100%}

这样图片会自动缩放到和其父容器等宽。

js版和css版自动按比例调整图片大小方法，分别如下：

<title>javascript图片大小处理函数</title>

var proMaxHeight = 150

var proMaxWidth = 110

function proDownImage(ImgD){

var image=new Image()

image.src=ImgD.src

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

var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height

if(rate <= 1){

ImgD.width = image.width*rate

ImgD.height =image.height*rate

}

else {

ImgD.width = image.width

ImgD.height =image.height

}

</script>

</head>

<body>

</body>

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：

.content-width {MARGIN: autoWIDTH: 600px}

.content-width img{MAX-WIDTH: 100%!importantHEIGHT: auto!importantwidth:expression(this.width > 600 ? "600px" : this.width)!important}

</style>

</div>

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：

HTML 代码：

这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

js代码：

var oImg = document.getElementById('img')

oImg.width = '50px' //当给img标签的宽度设置为50px后，高度会自动按比例缩小。

oImg.width = '200px' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。

欢迎分享，转载请注明来源：内存溢出

js 控制图片大小