余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室,是义乌外贸网站建设专家!

CSS按比例缩放图片代码

分类:网页设计 Tags: css 图片 评论:0 浏览:5869 最近更新时间:2008/10/10 23:27:48

把一副大图片按比例缩小或者放大到某个尺寸,对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:
 
  1. img{max-width:100px;max-height:100px;}
  2. img{min-width:100px;min-height:100px;}
对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放
 
  1. .thumbImage {max-width100px;max-height100px;} /* for Firefox & IE7 */
  2. * html .thumbImage { /* for IE6 */
  3. width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
  4. height: expression(this.height > 100 ? 100 : auto);
  5. }
由于把图片放大,可能存在图片锯齿化的问题,一般用在图片缩小的情况是较多的。



网站开发时经常遇到的问题,有些图片不适宜过大,大了之后会把整个网页撑开,很不好看.

下面是CSS控制图片显示的最大宽度的代码,直接放在CSS文件中调用就可以了
 
  1. #test img {  
  2. max-width:300px;/*IE7和Firefox用*/  
  3. width: expression(this.width > 300 ? 300: true); /*IE6用*/
  4. }

本文地址:/380/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:18.97.14.82,来自:

留言

 


免费咨询
建站咨询热线
15967985565
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email