我也来说说图片自适应大小问题
头记:
这两个月忙得我头都晕,到了今天才基本上做好了这个项目。
其中遇到了些图片大小在页面上显示的问题!
实现:
在新闻内容,相册等中,编辑或者用户上传的内容中图片没有规定大小,在页面上显示就要需要我们加上程序去让图片适应页面的大小。这样太大的图片才不把页面撑得太大,影响页面的显示,造成混乱。相信大家也遇过这样的问题。
解决方法:
首先和网上大部份的解决方案一样。使用了css2 ,让width大于520的图片width=520. 小于的就用回自身图片的大小
后来我改成
原来原因是onload图片时,页面不能正常获取图片的width,此时this.width=0。所以改成
这两个月忙得我头都晕,到了今天才基本上做好了这个项目。
其中遇到了些图片大小在页面上显示的问题!
实现:
在新闻内容,相册等中,编辑或者用户上传的内容中图片没有规定大小,在页面上显示就要需要我们加上程序去让图片适应页面的大小。这样太大的图片才不把页面撑得太大,影响页面的显示,造成混乱。相信大家也遇过这样的问题。
解决方法:
首先和网上大部份的解决方案一样。使用了css2 ,让width大于520的图片width=520. 小于的就用回自身图片的大小
<style type="text/css">
<!--
#cont img {
max-width:520px;
width:expression(this.offsetWidth>520?"520px":this.width);
overflow:hidden;
}
-->
</style>
在图片显示的地方
<div id="cont">
<img src="图片地址" alt=""/>
</div>
出现问题:页面显示时有时图片就变得很小,看不清。再刷新一下页面,就ok啦.因为css的功能不是所有的浏览器都可以正常使用。IE6。0和其以下也时不支持.这样用户看到的图片很不稳定。<!--
#cont img {
max-width:520px;
width:expression(this.offsetWidth>520?"520px":this.width);
overflow:hidden;
}
-->
</style>
在图片显示的地方
<div id="cont">
<img src="图片地址" alt=""/>
</div>
后来我改成
<img onload="if(this.width>520){this.resized=true;this.width=520;}" src="图片地址" alt=""/>"
图片显示还是不正常,大的图片有时已经onload完,但是没有执行那段javascript代码,仍然按图片本来大小显示出来,撑大了页面,看起来好混乱。原来原因是onload图片时,页面不能正常获取图片的width,此时this.width=0。所以改成
<img onload="if(this.width>520
之后就正常了||this.width<=0){this.resized=true;this.width=520;}" src="图片地址" alt=""/>"