关键词：css控制图片 等比例缩放 兼容IE6/IE7/火狐/谷歌
css控制图片按等比例缩放 兼容IE6/IE7/火狐/谷歌
今天自己的一个网站需要实现图片等比例缩放，但又不能使用js只能用css控制div中的img为指定大小，下面我找到一段代码分离给大家。
代码如下:
<style type="text/css">
.thumbImage img{
MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;
}
.thumbImage {MARGIN: auto;WIDTH: 600px;}
*html.thumbImage img{
width:expression(this.width>600&&this.width>this.height?450:auto);
height:expresion(this.height>450?450:auto);
}
</style>
html代码代码如下：
<body>
<DIV class="thumbImage" ><img src="1.jpg" border="0"></DIV>
</body>
这样只要在 class中thumbImage图片都会等比例缩放哦，小了就原始显示大的就等比例缩小。按比例缩小或者放大到某个尺寸，对于标准浏览器（如Firefox），或者最新都IE7,ie8浏览器，直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。
对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css code中嵌入javascript code来实现图片的缩放。
|
