图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。
.img2{
/*这里写你的所有图片都会用到的样式*/
}
.img2:first-child, .img2:last-child{
/*这里写第一个图片和最后一个图片会用到的样式*/
}
.img1:hover .showBigImg{
display:block
}
对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。
希望能帮助到你
<divstyle="border:1px
solid
red"></div>
任何容器的边框样式都这么写，三个参数分别为
“边框粗值”，“边框样式”，“边框颜色”，位置可任意，值有很多种
js版和css版自动按比例调整图片大小方法，分别如下：
<title>javascript图片大小处理函数</title><script language=Javascript>
var proMaxHeight = 150
var proMaxWidth = 110
function proDownImage(ImgD){
var image=new Image()
image.src=ImgD.src
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height
if(rate <= 1){
ImgD.width = image.width*rate
ImgD.height =image.height*rate
}
else {
ImgD.width = image.width
ImgD.height =image.height
}
}
}
</script>
</head>
<body>
<img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this) />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this) />
</body>
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
<style type="text/css">.content-width {MARGIN: autoWIDTH: 600px}
.content-width img{MAX-WIDTH: 100%!importantHEIGHT: auto!importantwidth:expression(this.width > 600 ? "600px" : this.width)!important}
</style>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
