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

28 篇文章 0 订阅
11 篇文章 0 订阅

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

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

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

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

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

第二种方法相对来说简单,不需要额外的编程.css中提供了max-width, max-height属性,通过指定这两个属性,图片会根据需要自动调整大小,并且保证长宽比例.比如: ><img id="imageid" src="home.jpg" style="max-height:300px; max-width:300px;"/>通过测试,在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;
}

 

  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

bruni

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值