WordPress文章中图片宽度自适应

WordPress文章中图片宽度自适应代码及修改方法:

编辑主题的style.css,在img样式定义中加上下列代码:

padding: 0;
max-width: 580px;
width: expression(this.width > 580 ? "580px": (this.width+"px"));height:auto;

就可以将图片的最大宽度设置为580px了。

有些主题没有直接定义img样式,可能会有.post img{}之类的样式,这时也加在里面就ok了。如图,我的博客主题修改的是.context p img{}:

auto-width

还有一些主题的style.css中找不到img{}等样式定义,那就就直接加上一段吧:

p img {
padding: 0;
max-width: 580px; 
width: expression(this.width > 580 ? "580px": (this.width+"px"));height:auto; 
}

jQuery方法实现,兼容IE6,图片右上角有个放大镜标识。

jQuery(window).load(function(){
/* jQuery方法实现自动缩放图片 beta2 by zwwooooo */
var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数,根据自己主题写选择器
if (img_cont != 0) { //做个判断,没有图片就不需要了
var maxwidth=600; //定义图片最大宽度,超过此宽度的图片自动缩为 maxwidth 值
var maxwidth_value=maxwidth+'px';
for (var i=0;i<=img_cont-1;i++) {
var max_width=$('.post img:eq('+i+')');
if (max_width.width() > maxwidth) {
max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});
}
}
}
});
展开评论