首页» IT互联网 » CSS自动限制文章中的图片尺寸

CSS自动限制文章中的图片尺寸

in IT互联网 | 5 条评论

经常更换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的地方改成你的宽度就好了。
转自:http://www.wheatv.com

关键词: ,

发表评论 » 共有5 条评论
  • wheatv

    如果转载的是原创文章,希望能写上出处,算是我们互相支持下了

    • king51

      忘记写了,已经注明出处!

  • coldplains

    不错~~~

  • emric

    不觉得又长又臭么.
    #content img {max-width:500px; width:500px; overflow:hidden;}
    基本完美(除开IE6)
    img.qtipImg {max-width: 500px; width: 500px; width:expression(this.width > 500 ? “500px” : this.width); overflow:hidden;}
    添加expression动作动态的调整图片大小
    主流浏览器一直正常

    • king51

      请注意你的素质?你的只是把上面的if判断转换成三元运算符了,实际区别不大。别在这里装13

  • 回复 king51 取消回复

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