IT技术互动交流平台

Javascript+CSS控制日志图片大小

作者:知更鸟  发布日期:2013-01-30 11:05:31

网上的方法很多,但都有局限性,本文提供的方法基本兼容主流浏览器

以HotNews主题为例。打开HotNews主题HotNewspro\js目录的custom.js把下面代码加到最后:


// 控制图片大小    
$(document).ready(function() {    
    var maxwidth=580;    
    $(".entry p img").each(function(){    
        if (this.width > maxwidth)    
         this.width = maxwidth;    
    });    
});   

再打开主题样式文件style在最后添加:


.entry p img{    
    height: auto;    
}

也可单独使用Javascript或者CSS控制图片大小,不过兼容性较差

javascrip:

www.it165.net
<script type="text/javascript">   

$(document).ready(function() {    
    var maxwidth=580;    
    var maxheight=450    
    $(".entry p img").each(function(){    
        if (this.width > maxwidth)    
         this.width = maxwidth;    
        if (this.height > maxheight)    
         this.height = maxheight;    
    });    
});    
</script>   

CSS:


.entry p img{    
    max-width: 90%;    
    height: auto;    
}   

其它主题可以将上述代码中的 .entry 为所用主题选择器。

编辑文章时手动将插入的图片拖小,个人认为一劳永逸。

Tag标签: Javascript   CSS   日志图片大小  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规