javascript控制背景图片大小_IT百科

如果你的图片是用img插入的，那么就在js中控制img标签的宽高；

如果图片是以背景插入的，那你应该用一个class来控制容器的样式。

当然如果你容器是固定宽高的话，最好的办法就是制作等大小的图片。同时css中有个backgroud-size可以很好来缩放背景图片。

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>

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

javascript控制背景图片大小