msgbartop
世界上没有老实人,所谓的老实人是用来欺骗像我这样老实的人!
msgbarbottom

12 9月 10 WordPress中控制图片溢出自动缩小

2010年9月12日发表于Net.Ru | 共有:4 人评论

在测试新的模板时,没有考虑到图片的大小问题。

所以在昨天下午午夜客上架新模板时,发现图片大点的日志全侧边栏全被挤到底部去了。

模板全部错位了。

好在去Wordpress.org.cn问到了解决方法,在CSS中,为IMG添加属性。

当图片大小超过指定大小时,自动缩小为指定最大的宽度,并成比例缩放高度。

完美解决Wordpress中图片溢出DIV而导致侧栏被挤移位的问题。

img,a img{border:none;max-width:100%;width:expression(document.body.clientWidth>700?”700px”:”auto”);overflow:hidden;}

如果在IE浏览器下还会溢出文章DIV盒子,就把500px宽度再改小点就OK了。

如果还想为图片增加点阴影的效果,还可以在css中为img标签添加如下代码:

position:relative;
display:block;
top:-2px;
left:-2px;
border:1px solid #ccc;
background:#fff;
padding:4px;

position:relative;display:block;top:-2px;left:-2px;border:1px solid #ccc;background:#fff;padding:4px;

演示效果如下:


Wordpress中控制图片溢出文章区域挤压侧边栏移位 - 午夜客

有和午夜客同样困绕的朋友可以测试一下吧。

下面是午夜客调试用的Wordpress模板的图片自动缩小加边框css代码:

.post img {
border:#cc9 1px solid;
padding:3px;
max-width: 500px; width: expression(this.width>480 && this.width>this.height ? 480 : true);
}

.post a img {
border-bottom: #b8860b 1px solid;

 

其中 post 是div 盒子模型的DIV名称。

Reader's Comments

  1.    

    这个很早就用了

    Reply to this comment
  2.    

    此法没用!

    Reply to this comment
  3.    

    厉害!厉害!

    Reply to this comment

Pingbacks/Trackbacks

  1. css、js控制图片大小不溢出模板 | 午夜客

您的留言

*