HTML Image Auto Resize, HTML图片大小自动调整
来源:互联网 发布:淘宝现在能买彩票吗 编辑:程序博客网 时间:2024/05/16 08:27
客户再次发来修改意见,有关图片,因为不同尺寸的图片如果不是按比例显示的化,就会长度或宽度被拉伸,看起来很不协调.
为了解决这个问题,特意在网上找了一些资料.自己的思路是有两种解决方法:
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代码:
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>
经过改进的版本:
//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.
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 Image Auto Resize, HTML图片大小自动调整
- Html/CSS笔记 调整图片大小
- 训练17-HTML 调整网页里图片大小
- html:image自动提交功能
- WebView加载HTML图片大小自适应与文章自动换行
- 更改html北京图片大小
- html:image具有自动提交功能
- IOS常用第三方框架 --- UIImage+Resize 调整图片大小
- webView 在解析html中自动调整大小
- iOS开发——WebView加载HTML图片大小自适应与文章自动换行
- iOS开发——WebView加载HTML图片大小自适应与文章自动换行
- Image resize
- resize image
- 图片大小调整
- html 调整笔记
- HTML 常用样式调整
- html image study note
- html Image Placeholder
- 开篇
- Linux 文件命令精通指南
- 面向 DBA 的 Linux Shell 脚本简介
- 夜来风雨声
- 了解ASP.NET底层架构
- HTML Image Auto Resize, HTML图片大小自动调整
- 必须用到和不必使用ajax的地方
- 今天收到了很多求职简历,看后颇有感触
- 使用java的native2ascii工具命令来转换编码gbk,gb2312,utf-8
- Ajax的竞争对手
- Ajax应用场景
- BLOG点击量过6000
- 软件界面建模浅析
- 软件全程建模1