在ff中,如果希望一个图片实现正常大小、比例显示,并在图片大小超过相框时自动缩放,可以通过max-width、max-height来实现。

但在ie6中,没有这两个属性。以下是实现方法。

假设相框为650*400

首先尝试使用一个简单的表达式:

width:expression(this.width > 650 ? 650:true);

height:expression(this.height >400 ? 400:true);

这个表达式很简单,但是如果图片的高和宽都超过边框,那么图片会被强制转到650*400,图片出现了变形。

因此,做以下改进:

width:expression(this.width > 650 && this.height<= this.width ? 650:true);

height:expression(this.height >400 && this.height > this.width? 400:true);

上面算式还隐藏了一个问题,如果图片长宽都比边框大,而长宽比大于650:400,则短边可能超出边框,因为我们只缩了最长边。

再做一次改进:

 

width:expression(this.width > 650 && (this.height-400)<= (this.width-650) ? 650:true);

height:expression(this.height >400 &&(this.height-400)>(this.width-650)? 400:true);

如上是我目前测试结果正确的max表达式在ie6中的正确转换。

各位大师大侠有高招请多多赐教。

[续]

上面的公式,1600*1200的图片变形了,反思改进如下:

width:expression(this.width > 650 && this.width/this.height >=1.625  ? 650:true);

height:expression(this.height >400 && this.width/this.height <1.625  ? 400:true);

用比例计算,觉得这样算正确了。

 

Posted on 2009-01-05 09:07  曹岳  阅读(716)  评论(3编辑  收藏  举报