1. 图片居中
<html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img { vertical-align: middle; } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body> </html>
2. 图片原图显示，超出部分隐藏。
<html> <style> #image{ width:500px; height:500px; background:#fff000; overflow: hidden; } </style> <body> <div id="image"> <img src="http://cms.smu.sh.cn:888/imagesStore/mmLib/superstar/2009/11/23/07BA1B0C79B146AA9AF32C10F2A5BCD2.jpg"/> </div> </body> </html>
3. 填满div，拉伸或者缩放图片。
<html> <style> #image{ width:500px; height:500px; background:#fff000; } #image img{ width: 100%; height: 100%; } </style> <body> <div id="image"> <img src="http://cms.smu.sh.cn:888/imagesStore/mmLib/superstar/2009/11/23/07BA1B0C79B146AA9AF32C10F2A5BCD2.jpg"/> </div> </body> </html>
4. div大小跟随图片变化
<html> <body> <div> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> </div> </body> </html>