需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
你这个现实文字，需要跟图片对应~~~例如：给每段文字加class:word_01 ,word_o2,word_03……然后展示图片的时候 根据index判断，现实相对应的那段文字。可以用jQuery实现。如果还是没有明白，把html代码打包给我，帮你调试！
楼下说的那个不怎么对.他把大小都固定了
.img1{ width:100pxheight:50px
应该使用百分比来 在你显示图片的地方设置一个大小 比如1000px X 1000PX 那么你打开的图片不会超过1000px 那么你按照百分比95% 高宽都一样 , 这样你的图片就不会现实的时候变形 因为你的图片不肯能全部都是正方形的吧
