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; }
