不同浏览器里图片大小不同的解决方法

我之前写过flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片，后来发现一个问题：原本图片大小这个参数选择square的话，显示的应该是几张75×75的图片，这在firefox里面一直是正常的，但IE里面就不是这样了，很多图片会被放大，影响总体效果。

前些天偶尔翻CSS手册，看到max-height属性，心想这正好可以解决这个问题。解决方法如下：

修改css文件添加如下代码：

#related-pic img {
max-height:75px;
max-width:75px;
width: expression( this.width> 75 ? “75px” : (this.width+”px”) );
height: expression( this.height> 75 ? “75px” : (this.height+”px”) );
}

意思就是说，在id为related-pic的容器里面，图片(img)的最大宽度和长度是75px，如果发现宽度或长度大于75的，就改成75，如果小于75的就大小不变。

然后在single.php中出现75×75的图片的地方用id为related-pic的容器括进去就可以了：

<b>[相关图片]</b><br />
<div id=”related-pic”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

这样，IE的显示就正常了。你当然也可以把上面这段CSS代码这届嵌入到HTML代码里面，如:

<div style=”css code”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

类似的， 你也可以设定文章内容中图片的最大宽度，以免不小心用了太大的图，把页面撑得面目全非。

[相关文章]
[相关图片]
(标签：图片)
[版权&共享]