利用CSS解决图片缩小不变形实例
2014-10-23 10:22:31   来源:   评论:0 点击:

使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。

 

使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:e­xpression(this.height>100?"100px":this.height);。

解决IE6支持max-height

div css解决IE6支持max-width

一般情况下只需要设置好宽度限制,比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片,同时为了兼容IE6我们设置个width:expression(this.width > 300 ? "300px" : this.width);解决即可。

体解决DIV+CSS实例代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>图片缩小不变形实例 www.divcss5.com</title> 
  6. <style> 
  7. .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden} 
  8. .divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);} 
  9. </style> 
  10. </head> 
  11.  
  12. <body> 
  13. <div class="divcss5"> 
  14. <img src="img.jpg" /> 
  15. </div> 
  16. </body> 
  17. </html> 

备注:缺点介绍,如果使用此方法,兼容各大浏览器不变形,但图片不是完整显示的。

相关热词搜索:css

上一篇:css如何设置图片或背景图半透明?
下一篇:最后一页