转载自: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]

发表评论

电子邮件地址不会被公开。 必填项已用*标注