首页 >> 网页设计 >> CSS/HTML专区 >> 用CSS实现图片等比例缩放

用CSS实现图片等比例缩放

作者:chencncj 来源:2guys.cn 时间:2008-1-18 网友评论条 【

您是否常常在做网页的过程中发现一个问题呢?当图片上传的时候,如果图片太大 ,就会把网页撑破,唯一做的就要先把它用软件缩小,再上传上去,这样重复的工作,您是否已经厌烦呢?

我昨天在做网页的时候也遇到这个问题,因此研究了一下,查找了网络上关于图片的CSS控制,总结出一个小技巧,我们可以通过修改CSS样式,来达到让图片等比例地限制在一定大小!

中国asp之家注:图片太大如果不做如何处理当然会破坏网页布局,要解决这个问题方法很多,简单的其实我们可以只要给图片限制一个宽度,或者像上面说的用软件缩小,当然这个是非常麻烦的,效率高的可以使用aspjpeg组件给图片自动生成缩略图;或者用CSS控制图片的大小,要想不让图片撑破网页何以加上overflow:hidden,把超出部分隐藏掉;

相关代码:

img {
max-width: 600px; 
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}

600的意思是指,我让图片宽度限制在600之内,如果小于600的,当然按照原本尺寸,如果超过600的,则按照宽为600,高为按比例缩小,这样,图片的显示效果就出来了!

站长工具
百度相关搜索查询:
相关文章
loading 请稍等,评论加载中...

学习Asp到中国Asp之家(Aspxhome.com)

闽ICP备06017341号