如何解决图片过大撑破网页？

如何解决图片过大撑破网页？一般解决方法运用css定义图片样式或者js控制图片。

很多时候图片没编辑直接用于网上的话有可能会出现图片撑破网页，css控制overflow:hidden的话，多出的图片会隐藏，因此最好的方法是当图片超过一定宽度的时候给它一个宽度，让图片等比例压缩。那么究竟如何解决图片过大撑破网页呢？

除IE6及以下版本浏览器外：

其他浏览器一般可以用下面这种方法实现：img{maxwidth:600px}，这个意思是图片的最大宽度是600像素，这种方法IE6不支持，优点是实现很简单，不需要等图片下载完之后才能控制，因为CSS先下载完。

能兼容IE6的方法：

1.在img标签中使用“ onload=”if(this.width>600)this.width=600″ ”这样子的属性就可以在ie下控制图片的最大宽度，缺点是必须等图片载入后这个onload才会起作用。

2.在css中定义img {max-width: 600px; width:expression(this.width > 600 ? “600px” : this.width)}，因为ie6支持expression，不过似乎比较占用资源。

3.使用 JavaScript 调整
一般情况下大多数人会使用 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。这里提供一个，貌似管用..

<script type=”text/javascript”>

window.onload = function() {

for (var index = 0; index <document.images.length; index++) {

var maxWidth = 600;

if (document.images[index].width> maxWidth) {

document.images[index].width = maxWidth;

}

}

}

</script>