背景图页面缩小会变形_防止图片撑破页面而变形的四种方法

防止图片撑破页面而变形的四种方法：

一、使用

src="pic.jpg"

width="400"

height="300">

直接固定图片的大小。这种方法

不会引起页面显示的错乱，但是显示的

图片经常是变形

了的。就不推荐了。

二、使用

οnlοad="javascript:if(this.width>300){this.resized=true;this.style.width=300;}"

>;

这种方法会在调用图片的时候，会自动按比例缩小到指定的宽度，不会引起图片的变

形，并且也不会撑破表格，因此就不会引起页面显示的错乱。

但也有一个缺点

，如果图片太大，在显示图片过程(下载过程)中，还是会先以图片原

大小显示，这时就会撑破表格，页面很难看。当然，当图片完全显示之后会自动缩小的。

三、为了防止图片把页面撑变形，在上述基础上，对容器进行溢出隐藏：

在容器

DIV

样式中加入代码，

{

width:600px;

overflow:hidden;}

就可以有效地防止页

面变形。但是往往

图片显示不全

。

四、更进一步，用鼠标滚轮可以缩小放大图片的代码：

function bbimg(o){

var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if

(zoom>0) o.style.zoom=zoom+'%';

return false;

}