html 图片自动缩小图片大小,HTML Image Auto Resize, HTML图片大小自动调整

客户再次发来修改意见,有关图片,因为不同尺寸的图片如果不是按比例显示的化,就会长度或宽度被拉伸,看起来很不协调.

为了解决这个问题,特意在网上找了一些资料.自己的思路是有两种解决方法:

1. 一种是调整图片的尺寸

2. 另一种是让浏览器自动调整尺寸

第一种方法好,但是对于一个图片你必须保存几个不同尺寸的版本/文件.但是需要额外的编程和存储空间.ImageMagick是一个不错的软件,通过它你可以为同一张图片创建不同尺寸的副本.不过我并没有选择.

第二种方法相对来说简单,不需要额外的编程.css中提供了max-width, max-height属性,通过指定这两个属性,图片会根据需要自动调整大小,并且保证长宽比例.比如: >通过测试,在Firefox2.0.0.3和IE 7.0.5730.11下是可以的,不知道IE6下是否有效,明日再测试一下.

当然,还有其他方法,比如通过javascript来控制,我也写了一个方法测试并且通过,唯一的缺点是图片会先按照原先尺寸在浏览器中显示,然后很快就因为javascript而改变显示大小,个人感觉不是很好.以下是javascript代码:

<

script language

=

"

javascript

"

>

function

ResizeImage(_image) {

var

max_width

=

300

;

//

最大允许宽度

var

max_height

=

300

;

//

最大允许高度

var

_width

=

_image.width;

//

图片实际宽度

var

_height

=

_image.height;

//

图片实际高度

var

width_ratio

=

_width

/

max_width;

//

最大允许宽度和图片实际宽度的比例

var

height_ratio

=

_height

/

max_height;

//

最大允许高度和图片实际高度的比例

//

alert("Width ratio:" + width_ratio + ", Height Ratio:" + height_ratio);

if

( width_ratio

>=

height_ratio) {

_image.width

=

max_width;

//

如果宽度的比例大,表示实际宽度大,所以直接限定图片宽度,高度会随之自动调整

}

else

{

_image.height

=

max_height;

//

反之亦然,高度比例大,限定图片高度

}

}

script

>

经过改进的版本:

function

ResizeImage(_image, max_width, max_height) {

//

var max_width = 300;

//

var max_height = 300;

var

_width

=

_image.width;

var

_height

=

_image.height;

var

width_ratio

=

_width

/

max_width;

var

height_ratio

=

_height

/

max_height;

//

alert("Width ratio:" + width_ratio + ", Height Ratio:" + height_ratio);

if

( width_ratio

>=

height_ratio

&&

_image.width

>

max_width) {

_image.width

=

max_width;

}

else

if

(height_ratio

>

width_ratio

&&

_image.height

>

max_height) {

_image.height

=

max_height;

}

}

===============================================================================

经过测试,max-height和max-width在IE6下无效.找了以下网上的资料,可以通过ie expression来解决

http://www.svendtofte.com/code/max_width_in_ie/

最后的解决方式如下,我限制图片的最大宽度/高度是300px.

.ImageStyle

{...}

{    max-height:300px;    max-width:300px;    width:expression( (this.width > 300 && this.width > this.height) ? '300px': this.width+'px');    height:expression( (this.height > 300 && this.height > this.width) ? '300px': this.height+'px');    border:0px;    vertical-align:middle;}