欢迎来到鲍余网络官网 官方微信 官方微博 IDC网站
深圳网站建设官方微信

网络之路,从这里开始

热线电话

18576678080 / 0755-85278776

网站知识
首页 > 网站知识 > 如何通过CSS控制图片大小

如何通过CSS控制图片大小

  • 所属分类: 网站知识
  • 发布时间:2015-06-26 19:40:24
  • 作者: 鲍余网络
  • 点击量:
 
我们添加在文章的内容区中,通常会有图片。如果图片的尺寸过大,常会把页面结构撑得变形。严重影响了页面的美观度。
 
以前,我采用JS来控制,效果还是不错。
这段时间,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理速度也更高。
 
方法如下:
程序代码
 
<div class=”UBBPanel”><div class=”UBBTitle”><img src=”images/code.gif”<br> style=”margin:0px 2px -3px 0px” alt=”程序代码”/> 程序代码<br></div><div class=”UBBContent”>.new_body .con img{vertical-align: middle;<br>max-width: 630px; width: expression(this.width >630 &&<br> this.height < this.width ? 630: true); }</div></div>
 
同样可以用对高度进行控制。
这种方法可以满足: 一个页面中,不同图片,超过所需大小时,自动缩成不同尺寸的需求。
 
应用面也很广,比如:一般的CMS等文章管理中,通常都有小图、大图。而我们在页面上,通常需要读取同一个图片,而分不同尺寸显示。再结合 overflow:hidden; 相信图片也就不会变形了。
 
程序代码
.pwl_spaceimg{width:160px; height:120px;overflow:hidden; }<br />
.pwl_spaceimg img{width:150px; border:0px; padding:4px; }
关键词:

相关文章:

有做网站需求?   联系客服经理 提交需求 直接拨打业务电话:0755-85278776