转载自:http://www.msland.cn/css-kongzhi.html
方法一、采用官方默认CSS
使用方法:将以下代码直接加入style.css即可
相关说明:只能控制宽度的缩放,高度无法控制,且不支持IE6
[cc lang=”css”]
p img {
padding: 0;
max-width: 100%;
}
[/cc]
官方的这个方法,不能控制高度,而且不支持IE6,下面偶寻找了一个比较完美的解决方案,我现在用的就是这种CSS控制方法:
[cc lang=”css”]
p img {
max-width:600px;
width: expression(this.width > 600 ? “600px” : true);
height:auto;
}
[/cc]
方法二、使用jQuery实现
使用方法:1、加载jQuery库 2、将以下代码加入header.php或单独保存为JS并加载
相关说明:可以对图片进行自动缩放,方法较为完美。
[cc lang=”javascript”]
$(document).ready(function(){
$(‘div’).autoResize({height:750});
});
jQuery.fn.autoResize = function(options)
{
var opts = {
‘width’ : 700,
‘height’: 750
}
var opt = $.extend(true, {},opts,options || {});
width = opt.width;
height = opt.height;
$(‘img’,this).each(function(){
var image = new Image();
image.src = $(this).attr(‘src’); if(image.width > 0 && image.height > 0 ){
var image_rate = 1;
if( (width / image.width) < (height / image.height)){
image_rate = width / image.width ;
}else{
image_rate = height / image.height ;
}
if ( image_rate <= 1){
$(this).width(image.width * image_rate);
$(this).height(image.height * image_rate);
}
}
});
}
[/cc]
方法三、CSS控制
使用方法:将以下代码直接加入style.css即可
相关说明:可以缩放高度以及宽度,但是比较死板,支持IE6
[cc lang="css"]
p img {
max-width:100px; /* FF IE7 */
max-height:80px; /* FF IE7 */
width:expression(this.width > 100 && this.width > this.height ? 100 : true);
height:expression(this.height > 80 && this.height > this.width ? 80 : true);
overflow:hidden;
}
[/cc]