CSS解决图片自动等比例缩小不变形的技巧
在DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。CSS解决图片缩小不变形实例
使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。
一般情况下只需要设置好宽度限制，比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片，同时为了兼容IE6我们设置个width:expression(this.width > 300 ? "300px" : this.width);解决即可。
[*]<!DOCTYPE html>
[*]<html>
[*]<head>
[*]<meta charset="utf-8" />
[*]<title>图片缩小不变形实例 www.divcss5.com</title>
[*]<style>
[*].divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
[*].divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
[*]</style>
[*]</head>
[*]<body>
[*]<div class="divcss5">
[*]<img src="img.jpg" />
[*]</div>
[*]</body>
[*]</html>
页:
[1]