极品分享

用CSS等比例缩放图片

 

试了N久后:width:expression(this.width > 100 && this.width > this.height ? 100 : true); height: expression(this.height > 100 ? 100 : true);

支持IE6 FF 和IE7

 

css控制图片的等比缩放

css样式代码
<style type="text/css">
img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style.height = this.offsetHeight >= 500 ? "500px" : "auto")); display:inline !important;}
</style>
示例中是默认网页所有的img的标签中的图片都会缩放,如果想让特定的图片缩放只要修改下前面的css名字,然后在网页中调用就可以了

随便看看页面图片强制等比缩放,发有修改前后对照图

不是专业人员,没有利用较高难度写JS或者css,只是为了网站美观,把网站版面美化的一些经验分享一下!!

为使大家一目了然,发有对照图,可以发现简单的改动确实能够美化页面!

随便看看页面的图片不会等比缩放,而是直接压缩成100*100px,为此,简单改css进行图片强制等比缩放

实例看看就明白了!

原版HOME随便看看图片效果:

 

 

一、纯CSS控制:

<style type="text/css">
.thumbImage {max-width: 200px;max-height: 200px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
        width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
        height: expression(this.height > 200 ? 200 : auto);
}
</style>
<img src="0.jpg" class="thumbImage"/>

 

 

二、JS控制

<table width="150" height="150">
<td align=middle >
<div align="center" ><img src="img/dd2.jpg" onload="resizeImage(this,150,150);"/></div>
</td>
</table>
<SCRIPT language=JavaScript>

function resizeImage(image,width,height)
{
var w = image.width;
var h = image.height;
if(w>width && w>h){
image.width=width;
image.height = parseInt(h*(width/w));
}
if(h>height && h>w){
image.width = parseInt(w*(height/h));
image.height = height;
}
}
</SCRIPT>

2012-05-26 0 /
DIV&CSS
/
标签: 

评论回复

回到顶部