css怎么让一张图片不失真的适应任何屏幕大小的电脑平铺?

html-css010

css怎么让一张图片不失真的适应任何屏幕大小的电脑平铺?,第1张

在默认状态下（或者说不做任何特殊的css设置的情况下），作为背景的图片都是不失真地进行平铺的啊。

当然，我所理解的“不失真”是指图片的长宽比例保持不变，如果你有其他的解释请说明。

放大一定会失真，缩小却不会，只要用js控制图片的宽或者就可以，只需要控制一个就可以，给你个js函数

function DrawImage(ImgD,ImgW){

//图片大小控制ImgD图片路径，ImgW是宽或高，看效果，看代码

var image=new Image()

image.src=ImgD.src

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

if(image.width/image.height>= 1){

if(image.width>ImgW){

ImgD.width=ImgW

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

}else{

ImgD.width=image.width

ImgD.height=image.height

}

ImgD.alt=image.width+"×"+image.height

}

else{

if(image.height>ImgW){

ImgD.height=ImgW

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

}else{

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

ImgD.width=image.width

ImgD.height=image.height

}

ImgD.alt=image.width+"×"+image.height

}

}

}