头闻号

东莞市东旺化玻仪器有限公司

化工实验设备|实验仪器装置|分析仪器|化学试剂|玻璃制品|实验室器皿

首页 > 新闻中心 > 科技常识:css图片缩放 通过css控制图片自动缩放至css定义大小
科技常识:css图片缩放 通过css控制图片自动缩放至css定义大小
发布时间:2024-12-24 01:09:03        浏览次数:3        返回列表

今天小编跟大家讲解下有关css图片缩放 通过css控制图片自动缩放至css定义大小 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图片缩放 通过css控制图片自动缩放至css定义大小 的相关资料,希望小伙伴们看了有所帮助。

在文章的内容区中 通常会有图片。如果图片的尺寸过大 常会把页面结构撑得变形。 以前 我采用JS来控制 效果还是不错。 这段时间 一直用DIV+CSS的方式来制作页面 发现用CSS来得更方便 相信处理速度也更高。 方法如下: 程序代码 复制代码代码如下: <div class=”UBBPanel”> <div class=”UBBTitle”> <img src=http://xyrl.com/skin/7ke/image/nopic.gif style=”margin:0px 2px -3px 0px” alt=”程序代码”/> 程序代码</div> <div class=”UBBContent”>.new_body .con img{vertical-align: middle;max-width: 630px; width: expression(this.width >630 && this.height < this.width ? 630: true); } </div></div> 同样可以用对高度进行控制。 这种方法可以满足: 一个页面中 不同图片 超过所需大小时 自动缩成不同尺寸的需求。 应用面也很广 比如:一般的CMS等文章管理中 通常都有小图、大图。而我们在页面上 通常需要读取同一个图片 而分不同尺寸显示。再结合 overflow:hidden; 相信图片也就不会变形了。 程序代码 复制代码代码如下: .pwl_spaceimg{width:160px; height:120px;overflow:hidden; } .pwl_spaceimg img{width:150px; border:0px; padding:4px; } 首先要讲 这个效果最好用js解决。下面是CSS解决方法: 复制代码代码如下:img { max-width:400px; _width:expression_r(this.width<400px?"auto":"400px"); } expression是针对IE6用的 在FF和IE7+版本max-width就行了

来源:爱蒂网