通过Style.css统一设置WordPress图片显示大小

一直想更换到Wordpress3.0的新主题Twentyten,但自从自动升级到Twentyten 1.1之后,原来放在Skydrive上的图片不能显示缩略图了。也就是说,原来较小的缩略图在Twentyten 1.1主题下直接按原尺寸大小显示,很让人郁闷。本来很久已经没有鼓捣过Wordpress了,但发现这次还是逃脱不了,必须的认真的修改一下,才能满足自己的要求。于是就上网搜索了一下,如何限制图片大小等等问题。找到了一些解决方案,虽然不太完美,但就我这个水平来说,已经足够了。就图片大小来说,主要是修改style.css文件(其实很多问题的解决办法都在这里,比如显示字体)。

这次更换主题,除了修改图片之外,还去掉了一些插件。当了并不是说这些插件的功能不好,还是因为这两年的WP使用中,觉得这些插件的功能用到的时候还是极少。启用这些插件,对我来说,只不过是满足了我个人的某种心理而已,比如WP Pagenavi。但现在还有一个问题,就是每个单篇文章后面跟随的那个关于作者的地方,我没给去掉,也懒得查阅如何去掉了。还有,就是字体,字号,字距不太满意,等有时间再说吧,现在对鼓捣这个我没有多大兴趣了,凑合着玩就行了。下面的就是我找到的一篇关于如何通过修改style.css来限制图片显示大小的文章中的一部分,给转载过来,以备后用!

可以在线编辑style.css,在img样式定义中加上一行max-width:100%就好了。

img {
border: 0;
max-width: 100%;
}

当然有些theme中没有直接定义img样式,可能会有.post img{}之类的样式,这时也加在里面就ok了。还有一些theme中的style.css中压根就没有img{}等样式定义,就直接加上一段吧:

p img {
padding: 0;
max-width: 100%;
}

Firefox往往能正常解析max-width:  100%;这一句,自动限制图片显示大小,但IE不行。解决方法:在线编辑,在p img{}里再加一行:width: 450px;

450px是firefox里显示max-width: 100%;的最佳大小,就把它定义成这个了,刷新IE后就可以发现效果和firefox一样了。

中文网站字体、字号及行高的设置

先让我们看看各大网站的默认字体

163.com:body{font-family:宋体,serif;}
qq.com:body{font-size:12px;line-height:22px;font-family:”宋体”,”Arial}
youku:body{font:12px/20px arial, verdana, tahoma, simsun, sans-serif;word-break:break-all;word-wrap:break-word;}
tudou:body{font-size:12px;line-height:1.25;font-family:Tahoma,sans-serif;}
统计来主要字号基本都是12px 行高基本都是在20px左右。
字体方面 门户网站基本肯定是要把宋体,设置成第一字体的,其它的娱乐性网站好想就没这个固定要求默认以arial与tahoma为主。
过去我在的公司统一改了一次默认字体都改成了tahoma,那时不咋清楚为啥,今天就来分析一下不同字号、字体及行高之间的区别。

字体问题

一、Tahoma的字体
1、所有游览器里,下划线都会紧贴中文字。
2、13px ie6中文非常难看。
3、 中英文混排问题,下划线也会出现错位。
二、Arial的字体
1、同样也存在下划线的粘贴问题。
2、13px字 依然很难看。
3、 中英文混排问题,下划线也会出现错位。
三、宋体的字体
1、Opera 下,只认 “宋体”, 不认 SimSun
Opera 下,只认 “宋体”, 不认 SimSun. font: 12px ‘宋体’, ‘微软雅黑’;
Opera 下,只认 “宋体”, 不认 SimSun. font: 12px SimSun, ‘微软雅黑’;
为了避免编码问题,推荐用:font: 12px \5b8b\4f53, ‘微软雅黑’;
2、宋体自带的英文和标点很难看,中英混排效果不好。

font: 12px arial; 此时,Opera 默认中文字体就是宋体。
font: 12px sans-serif; 此时,Opera 默认中文字体就是宋体。
font: 12px tahoma,arial,simsun,sans-serif; 对于’宋体’来说,如果后面已经没有中文字体,用 simsun 还是 ok 的。

行高问题

font: 12px/1 \5b8b\4f53; 行高为 1 时,IE6-7 下,高度不够时,会导致中文上下显示不全。
font: 12px/1.5 \5b8b\4f53; 行高为 1.5 时,一切正常。
GB编码问题

font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下,IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。
font: 12px simsun,sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下,IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。
font: 12px arial; 可以不写 sans-serif 来避免上面的问题。

备注:经过我无数次的尝试,Wordpress3.0的新主题Twentyten1.1下,文章中插入的外链图片的大小可以这样调节。

在style.css中找到a img { 这一代码,修改这一段代码为:

a img {
border: none;
height: auto
width: 640px;
max-width: 40%;
}

其中width: 640px,是我自己猜测的,twentyten主题下正文部分的宽度;max-width: 40%,就是限定图片的宽度占正文部分(不包括侧边栏)的百分比。

注意:width项一定要在max-width项之前,否则在ie下不起作用!这可是我亲自实践的,费了我九牛二虎之力,不过,实践证明,还是自己动手来的实用些!

分享到:

↓如果你有兴趣,可以从这里阅读更多相关的文章↓

This entry was posted in 消遣 and tagged , , , , . Bookmark the permalink.

11 Responses to 通过Style.css统一设置WordPress图片显示大小

  1. 风也飘泊 says:

    WP3.0的默认主题比2.9的好看多了

    • Shian Chen says:

      确实,不过很多地方也需要自己动手修改。玩WP差不多三年了,现在对那些花里胡哨的功能已经不感兴趣了,只想要简单,使用,能兼具美观的话,那就再好不过了!

  2. 334421 says:

    其实,有好多,主题都挺漂亮的

  3. Ncsfo says:

    a img {
    border: none;
    height: auto
    width: 640px;
    max-width: 40%;
    }
    用了这段代码后 大图确实变小了 但小图也被拉大了 不知有没有方法解决(以上情况在IE、Chrome、Opera中都有发生)
    我一直在寻找一个完美解决文章中图片宽度的方法,用过:
    p img {
    padding: 0;
    max-width: 100%;
    height: auto;
    }
    在Chrome、Opera中都很正常,但是用IE查看就不行了加上你说的width: 640px;所有图片都变成一样宽,求完美兼容各大主流浏览器的方法。
    我的邮箱:ncsfo@163.com

    • SHIANCHEN says:

      第一段代码的意思就是640px的40%也即256px,这是强制限定图片大小。超过这个尺寸的,会被压缩为这个尺寸,小于这个尺寸的,也会被拉伸为这个尺寸吧!
      不加宽度限制的,则应该自由伸缩,max-width: 100%;也只是限制了最大不超过页面宽度。

      至于你说的我真的不懂,这个方法也是我自己琢磨的,我对代码一窍不通,帮不了你。不过我想肯定不是问题,只是你我不知道罢了:(

  4. general says:

    写的不错啊!!顶!!

  5. darkhandz says:

    感谢,学到了调整方法!

  6. yesureadmin says:

    长知识了,马上去试试

  7. Dale says:

    CSS 真是门学问,一直没有接触过,有时间一定的得学学。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>