首页 > 代码库 > 用CSS控制图片大小显示的方法

用CSS控制图片大小显示的方法

2024-07-22 09:17:08   224人阅读

图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？

可以通过按比例缩小或者放大到某尺寸（自己指定），来保持图片不变形走样的完全显示。

对于标准浏览器（如Chrome/Firefox），或者IE7/8浏览器，直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。如： 我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：


 
  1. </pre><pre name="code" class="plain">img {    
  2.   max-width:100px;    
  3.   max-height:100px;    
  4.   overflow:hidden;    
  5. }    



 
 
 

对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css code中嵌入javascript code来实现图片的缩放：


 
  1. img {     
  2.   width:expression(this.width>150?"150px":this.width);     
  3.   height:expression(this.height>150?"  150px":this.height);     
  4. }    

一个比较好的解决方案：


 
  1. img {     
  2.   border:0;     
  3.   margin:0;     
  4.   padding:0;     
  5.   max-width:150px;     
  6.   width:expression(this.width>150?"150px":this.width);     
  7.   max-height:150px;     
  8.   height:expression(this.height>150?"  150px":this.height);     
  9. }    


这样当图片的高度或宽度若超过150px，将会按比例压缩成150px，如果不超过则按原大小显示。

用CSS控制图片大小显示的方法


联系
我们