Wordpress中CSS自动调整文章中的图片尺寸

puppy

.entry img {max-width: 400px} .entry img {   zoom:expression( function(elm) {   if (elm.width>400) {   var oldVW = elm.width; elm.width=400;   elm.height = elm.height*(400 /oldVW);   }   elm.style.zoom = ‘1’;   }(this)); }

经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,假设是400px,这时原先的图片宽度都是500px,这样就会撑大整个容器,造成页面布局混乱,或者容器CSS加了overflow:hidden时,图片的右侧会被截去,显得很不协调,下面介绍的小常识是利用CSS等比例缩小图片,这样就可以完美的显示在你的新主题上了。

首先找到内容区域的样式,一般是.entry这个类,在style.css中增加以下代码就可以搞定了。

.entry img {max-width: 400px}
.entry img {
  zoom:expression( function(elm) {
  if (elm.width>400) {
  var oldVW = elm.width; elm.width=400;
  elm.height = elm.height*(400 /oldVW);
  }
  elm.style.zoom = ‘1’;
  }(this));
}

根据你的主题内容区域的实际尺寸来设定图片最大宽度,只要小于等于这个宽度即可。将所有出现400px的地方改成你的宽度就好了。


相关推荐
  • 自定义WordPress的Feed的地址
  • WordPress 3.2 主要新增功能详解
  • Wopus问答第一期
  • WordPress 3.0多站点功能解析(三)
  • 教程:Akismet获取API KEY的方法
  • 系统推荐
  • 教你如何修改wp自带的小工具
  • web环境下的各种wordpress伪静态规则
  • wordpress编辑文章时点击添加媒体没反应 不能添加图片

  • puppy

    官方运营-Sean丶♥

    5187 SEO文章

    评论