Gimhoy's Blog

[文章目录]

您曾经浏览过

WordPress文章中图片宽度自适应

本文最后更新于2013年6月13日,已超过三年没有更新,如果文章内容失效,请反馈给我们,谢谢!

前言

之前在文章中插入图片时,由于主题设置的文章宽度只有600px,所以当图片宽度超过600px时,图片的右边就会被裁掉一截不显示。为了让图片完整显示,我之前采取的办法是在插入图片时编辑图片的宽度,将width设置为一个合适的值。但是当要插入的图片很多时,修改起来费时费力,而且之前发布的文章也要翻出来修改。要是更换了主题,宽度变了又得改一次,实在是太麻烦。

后来搜了一下,发现直接修改css是个很简便的方法(其实官方的模版都有这个功能).
 

代码及修改方法

编辑主题的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; 
}

 

效果对比

修改前:
auto-width-1

修改后:

auto-width-2

  

2013.5.14 Update

jQuery方法实现

方法来自https://zww.me/archives/25438
兼容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"});
  			}
  		}
   	}
});


免费获得每月10G空间+10G免费流量
  • Comment (6)
  • Trackback (0)
  • 菊部受审 Google Chrome Windows 2015/04/25 21:03 @Ta

    学习了 目前正好遇到这个问题

    #25
  • 左迪 Mozilla Firefox Windows 2014/07/28 01:14 @Ta

    回复界面很喜欢~不知道是用什么实现的呢?对了~输入网址那有BUG,不适应CN域名~所以我无法输入我的www.zdok.cn域名~

    #24
    • Gimhoy Google Chrome Windows 2014/07/28 22:33 @Ta

      代码实现的

  • OYOY Google Chrome Windows 2013/05/12 15:25 @Ta

    好办法。。。楼上的MJJ

    #23
  • 梦月酱 Mozilla Firefox Windows 2013/05/12 12:27 @Ta

    博主你好,因为我的博客最近版面最近大幅度调整,为避免不必要的搜索引擎波动,已经去掉您的友情链接,特通知您也请下架我的友情链接,避免您的损失,如有麻烦尽情谅解,再次表示歉意,谢谢。

    #22
  • 还没有Trackback
Leave a Reply

*

*