Javascript+CSS控制日志图片大小

2013-2-8 chenmo 网站建设

为了让文章的图片不撑破布局,找到了这个方法:

以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:

<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 为所用主题选择器。

来源:http://zmingcx.com/javascript-css-size-picture.html

标签: 用CSS控制图片大小代码

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助