爱生活

WordPress图片撑破页面解决办法

J的个人生活上给出了解决方法：
如果Blog的文章正文部分宽度只有450px，文章里加了一幅宽度超过450px的图片，无论是IE还是Firefox/Opera下都会出现撑破页面的情况。怎么办呢？下面给出两种解决方案备选。

1. 通过定义CSS解决。示例：定义一个如下img属性

#xxxx .xxxxx img {
max-width: 450px;
width: expression(this.width > 450 ? “450px” : this.width);
}

max-width: 450px: 代码中的这个部分针对Firefox/Opera浏览器，限制对象的最大宽度为450px。
此代码对IE无用，为了让IE也能限制对象宽度，所以在代码中加入第2行命令，用IE提供的expression命令,使所有图片的宽度自动缩小或放大至450px:
width: expression(this.width > 450 ? “450px” : this.width);

这种方法简单易行，一劳永逸，但是IE浏览器中，所有宽度不足450px的图片也会被放大失真。

2. 在插入图片的时候定义图片宽度。
如果想要完美解决这个问题，还有个笨办法，就是针对每张宽度大于450px的图片，都在插入图片时定义其宽度为450px。例如：

这样，该图片的宽度就会被缩小至450px了。

第二种方法比较自由，可以根据需要进行调整；缺点就是需要记忆width属性。