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

原创 2007年04月28日 01:16:00

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

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

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;
}

 

HTML技法-HTML加密解密/压缩优化与HTML乱码分析/防360拦截/HTML万能解密器

课程内容包含乱码的原因分析、代码的压缩与优化、JavaScript/html前端代码加密解密、前端加密防360浏览器拦截、html代码解密原理分析、万能解密神器、手动解密html代码等等。
  • 2016年06月28日 14:02

HTML图片拉伸

图片拉伸方法 主要用在登录页的省事使用方法,一张背景图就可以解决,省掉搭建页面的繁琐,但个人也不知道这样搭建是否是好事,但也是一种方法。 本文参考文章地址: HTML中使背景图片自适应浏览器大...
  • u011873135
  • u011873135
  • 2015-09-07 16:32:14
  • 762

让div背景图片自动拉伸,而不是平铺!超简单!

无法拉伸! 但是可以用 background-repeat:no-repeat; 这个方法来 控制背景不会平铺! 或者将你上面的代码改为 ...
  • dxnn520
  • dxnn520
  • 2012-09-19 23:54:52
  • 37779

html img图片不变形等比例缩放,兼容ie6

方法1  img 只定义宽(或高)度可以等比例缩放,外面加个框,设置宽高和 overflow:hidden; 即可 方法2  在img标签里面只设置宽...
  • Lpandeng
  • Lpandeng
  • 2017-05-19 12:05:19
  • 5302

Html显示图片时,超过规定尺寸大小,则同比缩放图片显示,保持页面不变形的方法

Html显示图片时,超过规定尺寸大小,则同比缩放图片显示,保持页面不变形的方法: .L_center_img img{ max-height:145px; max-width:...
  • ma451152002
  • ma451152002
  • 2017-05-18 17:14:15
  • 3049

html img图片等比例缩放

在img标签里面只设置宽,不设置高,图片就会等比例缩放。
  • tolcf
  • tolcf
  • 2014-12-12 17:51:53
  • 75790

html的img标签设置大小的问题

html的img标签设置大小的问题的几种方法
  • xiemanR
  • xiemanR
  • 2016-11-09 20:15:10
  • 4309

css img 等比例自动缩放

img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 按父容器宽度自动缩放,并且保持图片原本的长宽比...
  • Forrest_Chen
  • Forrest_Chen
  • 2016-08-15 12:30:56
  • 28483

css让图片自适应容器(div)大小

不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。...
  • promiseCao
  • promiseCao
  • 2016-08-25 12:16:37
  • 92294

OpenCV改变图像大小的操作,resize与图像金字塔方法

OpenCV改变图像大小的操作有两类:resize与图像金字塔,但是这两类操作差别还是比较大的。 一、resize 函数原型 void resize(InputArray src, ...
  • xiaoshengforever
  • xiaoshengforever
  • 2013-09-30 12:21:13
  • 39141
收藏助手
不良信息举报
您举报文章:HTML Image Auto Resize, HTML图片大小自动调整
举报原因:
原因补充:

(最多只允许输入30个字)