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

html-css012

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

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

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

#header{ height:118pxbackground:#c60 url(header-back.jpg) center repeat}

根据你的CSS代码，这里的repeat表示背景图片进行水平及垂直平铺。平铺不会照成图片的模糊。因为是背景图，height也不会影响到图片模糊。

有可能是你自己不小心把浏览器的显示放大了（按住了ctrl键并滑动了鼠标滚轮或者按住ctrl键并按了+键，这样都会放大浏览器显示），照成了在浏览器中观看图片比在图片查看软件中的原图片要模糊，只要调整回去即可。点击浏览器空白处，然后同时按住ctrl键 和 0键（这里是零，不是o） ，即可恢复原状。

放大一定会失真，缩小却不会，只要用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

}

}

}