十二月 29th, 2008

[博客SEO, 天天小语]搞定图片自适应宽度的2种方法!

Category: 博客SEO, 天天小语, Author: 天天小雨 , ( 1310 个脚印 )

原创文章,引用请注明:引用转载自www.tianliang.org。  

对于所有使用Wordpress的用户而言,因文章中不慎插入过大尺寸的图片而导致撑破页面或是侧栏下沉绝对是一场噩梦。对于yo2的博客用户来说,以前可以用到“iMax Width”插件来设定页面(日志)所允许的最大图片宽度,可是后来发现这款插件和系统有冲突,便被放逐了(现在后台已经找不到这款插件了)。看到有朋友在讨论区里询问如何实现图片自适应宽度(其实前些日子我也一直在寻找替代“iMax Width”的方法),我现在告诉大家2个方法,让撑破页面的日子不再来!

        方法一:
        1、后台启用“MyCSS + Page Header & Footer”插件。
        e6909ee5ae9ae59bbee78987e887aae98082e5ba94e5aebde5baa6e79a842e7a78de696b9e6b395e6af94e8be831.gif

        2、进入到“MyCSS + Page Header & Footer”。
        e6909ee5ae9ae59bbee78987e887aae98082e5ba94e5aebde5baa6e79a842e7a78de696b9e6b395e6af94e8be832.gif

        3、输入图片自适应宽度代码。
img {WIDTH: expression(parseInt(this.width)>500?’500px’: this.width); border:0px;}

        如果图片宽度高于500px,就替换成宽度500px的宽度,数字可以改动成你需要的宽度,这样一来,图片就会按比例缩略为自适应宽度。但这样一来,网站上(博客上)的所有图片都会被缩小,其实是我们希望仅仅是日志或者页面上的图片能自适应,所以也有一定的局限性。

        方法二、
        1、将模板私有化,进入。
        e6909ee5ae9ae59bbee78987e887aae98082e5ba94e5aebde5baa6e79a842e7a78de696b9e6b395e6af94e8be833.gif

        2、进入“style.css”,查找到“.post .entry img{margin:10px 0;}”
        e6909ee5ae9ae59bbee78987e887aae98082e5ba94e5aebde5baa6e79a842e7a78de696b9e6b395e6af94e8be834.gif

        3、将其更改为“.post .entry img{max-width: 380px;  width: expression( this.width> 380 ? “380px” : (this.width+”px”) );}”,OK了!
        e6909ee5ae9ae59bbee78987e887aae98082e5ba94e5aebde5baa6e79a842e7a78de696b9e6b395e6af94e8be835.gif

        这是最恰当的CSS方法,只会将日志里面的图片自适应宽度,而不会影响其他的图片。

        可能还有其他方法,不过我想第二种方法就已经很不错了,你如果还没有设定,快去修改吧!

原创文章[除网络转载]转载请注明: 转载自天天小雨博客
本文链接地址:搞定图片自适应宽度的2种方法!

Add Comments

本文网址:http://www.tianliang.org/635961/

3 Comments so far

» You can leave a response or Feed for this Entry or Trackback .

  1. Gravatar Icon 匿名 Says:

    太好了!正需要这个代码! ;)

    [回复]

  2. Gravatar Icon 古侯子 Says:

    哈哈,我从来都是手动调节到不超过页面的宽带,看来似乎圡了好多

    [回复]

  3. Gravatar Icon 古侯子 Says:

    yo2后台有一个Fix Image width的插件,似乎是好用的。

    [回复]

leave a reply