WordPress 实现图片自动缩放

当前位置：首页 > 网站相关 > 正文

WordPress 实现图片自动缩放

Jun262012

作者：Zero 发布：2012-06-26 22:47 分类：网站相关阅读：16,773次 11条评论

偶经常发表日志需要配图，感觉加点图片怎么都看着舒服些，有时候加的图片比较大，
导致图片显示不全，所以需要这个自动缩放效果！
wordpress官方皮肤自带有大图片自动缩放，但是效果不是很好，下面列举3种比较完美的缩放代码供大家参考。

方法一、采用官方默认CSS

使用方法：将以下代码直接加入style.css即可
相关说明：只能控制宽度的缩放，高度无法控制，且不支持IE6

p img {
	padding: 0;
	max-width: 100%;
	}

官方的这个方法，不能控制高度，而且不支持IE6，下面偶寻找了一个比较完美的解决方案，我现在用的就是这种CSS控制方法：

p img {
max-width:600px;
width: expression(this.width > 600 ? “600px” : true);
height:auto;
}

方法二、使用jQuery实现

使用方法：1、加载jQuery库 2、将以下代码加入header.php或单独保存为JS并加载

相关说明：可以对图片进行自动缩放，方法较为完美。

$(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');&#160;&#160; 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);
            }
        }
    });
}

方法三、CSS控制

使用方法：将以下代码直接加入style.css即可

相关说明：可以缩放高度以及宽度，但是比较死板，支持IE6

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

这个可以控制缩放固定大小~~也挺好的！

分享到：

本文固定链接: http://www.msland.cn/css-kongzhi.html | 迷失的世界

该日志由 Zero 于2012年06月26日发表在网站相关分类下，你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: WordPress 实现图片自动缩放 | 迷失的世界
关键字: css, wordpress, 自动缩放

【上一篇】一款法国人开发的小巧迷你的MP3播放器
【下一篇】2012全球特技嗨翻天牛B人物镜头大合集

您可能还会对这些文章感兴趣！

WordPress 实现图片自动缩放：目前有11 条留言

6楼
泪雪  :

这个挺好的去用用

2012-07-04 下午 12:42 登录以回复
- Zero :
  
  建议用jQ的方法…………
  
  2012-07-05 上午 1:11 登录以回复
5楼
宾果儿 :

做个记号，回头添加试试效果，吼吼。

2012-07-02 上午 10:27 登录以回复
4楼
潇遥 :

确实啊，我现在写影评就遇到图片大小的问题，wp自带的缩放功能确实不咋地，有空试试你的办法，不过看起来好复杂啊。

2012-06-30 下午 10:50 登录以回复
- Zero :
  
  一点都不复杂啊，挺简单的！就是几段代码！
  
  2012-07-02 上午 12:09 登录以回复
地板
泪雪  :

能做成一个插件就最好了方便嘛

2012-06-28 下午 1:58 登录以回复
- zero :
  
  加段代码的问题还需要搞成插件啊。多麻烦啊！
  
  2012-06-28 下午 4:54 登录以回复
板凳
混乱羽翼 :

额，有木有Demo呀，求个演示看看，我是用了灯箱插件了

2012-06-27 下午 10:01 登录以回复
- zero :
  
  Demo来了:http://www.msland.cn/naxienian.html
  不过貌似也不支持IE6，好像360浏览器都不支持。。悲剧了，回头还是改成JQuery控制把~！
  
  2012-06-27 下午 11:36 登录以回复
沙发
5不出来  :

我之前就是在后台改大小，还要不停的试百分之多少大小合适

2012-06-27 下午 7:52 登录以回复
- zero :
  
  百分之多少合适。。。晕死！~
  
  2012-06-27 下午 11:37 登录以回复