<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS examples - A:hover图片预览效果--By:小web</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<mce:style type="text/css"><!--
*{
position:relative
}
img {
border:none
}
#room{
width:520px
margin:50px auto
text-align:centerfont-size:13px
}
#room a{
display:block
width:100pxheight:100px
margin:5pxpadding:5px
float:left
line-height:25px
border:1px solid graybackground:#ccc
}
#room a img{
width:100pxheight:100px
}
#room a:hover{/*IE6的bug在这个设置中可以消除*/
background:none
color:#0065FF
z-index:1000
}
#room a:hover img{
display:block
width:200pxheight:200px
margin-left:-100pxpadding:2px
position:absoluteleft:50%top:-50px
border:1px solid graybackground:#fff
}
--></mce:style><style type="text/css" mce_bogus="1">
*{
position:relative
}
img {
border:none
}
#room{
width:520px
margin:50px auto
text-align:centerfont-size:13px
}
#room a{
display:block
width:100px
height:100px
margin:5px
padding:5px
float:left
line-height:25px
border:1px solid graybackground:#ccc
}
#room a img{
width:100pxheight:100px
}
#room a:hover{/*IE6的bug在这个设置中可以消除*/
background:none
color:#0065FF
z-index:1000
}
#room a:hover img{
display:block
width:200pxheight:200px
padding:2px
position:absoluteleft:-25%top:-25%
border:1px solid graybackground:#fff
}</style>
</head>
<body>
<div id="room">
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" alt="星坐" /></a>
<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" alt="星坐" /></a>
</div>
</body>
</html>
代码：<?php
$szPostContent = $post->post_content
$szSearchPattern = '~<img [^\>]*\ />~'// 搜索所有符合的图片
preg_match_all( $szSearchPattern, $szPostContent, $aPics )
$iNumberOfPics = count($aPics[0])// 检查一下至少有一张图片
?>
<?php if ( $iNumberOfPics >0 ) { ?><?php echo '<span class="miniature" >'.$aPics[0][0].'</span>'?><?php } ?>
以上结束，然后需要在style.css中添加miniature的样式，图片尺寸，width(宽)，height（高）大小自己修改。
如：
.miniature img{width:140pxheight:160pxfloat:leftmargin-right:5pxoverflow:hiddentext-align:centerline-height:22pxpadding:2pxborder:1px solid #ccc}
以此类推，不同地方换不同的class样式就行了。
一般情况下 用css定义 可以制定一个最大宽度会最大高度，这样图片就不会超出列表队列的宽高，不过原图片的比例也要适当才可以img{max-height:100pxmax-width:200px}
