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

html-css016

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

}

}

}

不定义div的宽度，以及父div的宽度即可。

来做一个导航：

<style typr="text/css">

*{margin:0padding:0border:0}

.navbg{background:redheight:50px}

.nav{width:980pxheight:50pxmargin:0 auto}

li{float:leftmargin:10pxline-height:30px}

</style>

<div class="navbg">

<div class="nav">

<ul>

<li>首页</li>

<li>联系我们</li>

<li>留言</li>

</ul>

</div>

</div>

放在<body>里试一下便知

如果<style>里再加一句 body{width:980pxmargin:0 auto}则不能铺满屏幕，只有980px。