img{ width:auto; height:auto; max-width:100%; max-height:100%; }
这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
height:auto;图片的高度自己适应(图片有多高就显示多高)
width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
max-width:100%;图片的宽度不能超过图片所在的空间的宽度
max-height:100%;图片的高度不能超过图片所在的空间的高度
max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
这2个中，优先对max-width进行缩放，当图片在max-width缩放后的尺寸仍然超出容器大小时。max-height就发挥了作用：对图片再次进行缩放！
可以再配合上定位居中的效果，
1 父：relative 2 子：absolute ，margin:auto auto;left:0;top:0;right:0;bottom:0;
给上案例
html：（使用了插件lightbox，实现弹出大图的效果）
1 <ul class="ryzz_list ul clearfix"> 2 <!-- width="320" height="270" --> 3 <li><a href="images/ryzz_1.jpg" data-lightbox="group1"> 4 <img src="images/ryzz_1.jpg" alt=""> 5 </a><p>ISO 9001</p></li> 6 <li><a href="images/ryzz_2.jpg" data-lightbox="group1"> 7 <img src="images/ryzz_2.jpg" alt=""> 8 </a><p>CE证书</p></li> 9 <li><a href="images/ryzz_3.jpg" data-lightbox="group1"> 10 <img src="images/ryzz_3.jpg" alt=""> 11 </a><p>FC证书</p></li> 12 <li><a href="images/ryzz_4.jpg" data-lightbox="group1"> 13 <img src="images/ryzz_4.jpg" alt=""> 14 </a><p>ISO 9001</p></li> 15 <li><a href="images/about_img1.jpg" data-lightbox="group1"> 16 <img src="images/about_img1.jpg" alt=""> 17 </a><p>ROHS报告</p></li> 18 <li><a href="images/index_video.jpg" data-lightbox="group1"> 19 <img src="images/index_video.jpg" alt=""> 20 </a><p>FC证书</p></li> 21 </ul>
css：
1 .ryzz_list li{float: left;margin-right: 90px;width: 320px;padding:7px 9px 0;height: 335px;margin-bottom:75px;border:1px solid #f0f0f0;background: #fafafa;} 2 .ryzz_list li>a{display: block;width:320px;height:270px;position: relative;} 3 .ryzz_list li>a img{width: auto;height: auto;max-width: 100%;max-height: 100%;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;} 4 .ryzz_list li>p{margin:0;line-height:64px;color: #000000;text-align: center;font-size: 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 5 .ryzz_list li:hover p{color:#e60a00; }
原文：http://www.cnblogs.com/ghfjj/p/6307324.html
