废话不说,直接到正题。

 

将用户选择的图片,直接加载到一个固定大小的容器内。如果被加载的图片大小和容器的大小及宽高一致,那么图片比例失调的概率极大。如何让图片加载到容器内有保持比例不失调呢?想一个算法吧!

 

设容器宽为W,高为H,则宽高比例为W/H=A;

设被加载图片宽为W',高为H',则被加载图片宽高为W'/H'=A';

设修正后的被加载图片宽为W'',高为H''。

 

下面分情况讨论:

 

A>1的情况

1. 若A'>A,这时被加载图片相对容器更宽,更矮。

因此,被加载图片宽度 = 容器宽度, 被加载图片高度 = 原有宽高比率下的现有宽度对应的高度;

则,W'' = W, H'' = W'' / A' = W / ( W' / H' ) = W * H' / W' = H' * ( W / W' ); 

2. 若A'<A且A'>1,这时被加载图片相对容器更高,更窄。

因此,被加载图片高度 = 容器高度, 被加载图片宽度 = 原有宽高比率下的现有宽度对应的宽度;

则,H'' = H, W'' = H'' * A' = H * ( W' / H' ) = H * W' / H' = W' * ( H / H' );

3. 若A'<A且A'<1,这时被加载图片相对容器更高,更窄。

因此,被加载图片高度 = 容器高度, 被加载图片宽度 = 原有宽高比率下的现有宽度对应的宽度;

则,H'' = H, W'' = H'' * A' = H * ( W' / H' ) = H * W' / H' = W' * ( H / H' );

4. 若A'<A且A'=1,这时被加载图片为正方形。

因此,应该取容器最小变作为被加载图片的边长;由于目前容器更宽,因此取容器高为被加载图片的边长;

则算法同2,3.

5. 若A' = A,这时被加载图片和容器的宽高比率相同。

因此,W'' = W, H'' = H。

 

A<1的情况

1. 若A'>A且A'>1,这时被加载图片相对容器更宽,更矮。

因此,算法同(A>1的情况中的算法1)

2. 若A'>A且A'=1,这时被加载图片为正方形,相对容器较宽,较矮。

因此,算法同(A>1的情况中的算法1)

3. 若A'>A且A'<1,这时被加载图片相对容器更宽,更矮。

因此,算法同(A>1的情况中的算法1)

4. 若A'<A,这时被加载图片相对容器更高,更窄。

因此,算法同(A>1的情况中的算法2,3)

5. 若A' = A,这时被加载图片和容器宽高比率相同。

因此,W'' = W, H'' = H;

 

 

在A=1的情况下

1. 若A'>A,这时被加载图片相对容器更宽,更矮。

因此,算法同(A>1的情况中的算法1)

2. 若A'<A,这时被加载图片相对容器更高,更窄。

因此,算法同(A>1的情况中的算法2,3)

3. 若A' = A,W'' = W, H'' = H.

 

综合上述三种情况,可以得出以下结论:

若被加载图片相对容器更宽,更矮:

即当A' > A时,W'' = W, H'' = W / A';

若被加载图片相对容器更高,更窄:

即当A' < A时,H'' = H, W'' = H * A';

若被加载图片宽高比与容器相当:

即当A' = A时,W'' = W, H'' = H。

 

测试文件已经上传,欢迎大家评点