在DIV CSS布局中對於圖片列表或圖片排版時，圖片不是固定寬度高度大小，但圖片占位是固定寬度高度，這個時候如果使用CSS固定死圖片大小（寬度 高度），這個時候如果圖片相對於這個位置不是等比例大小，那么這張圖片就會變形，讓圖片變的不清晰，這個時候想讓圖片不變形又按比例縮放，如何解決？CSS圖片縮小不變形，圖片自動縮小，圖片按比例等比例縮小不變形解決。
解決方法有兩種：
第一種，讓圖片和布局寬度高度成等比例，這樣CSS設置死寬度和高度，圖片也是等比例縮小，圖片也不會變形。
比如淘寶，要求店鋪主上傳產品封面圖片是正方形的，為什么，因為圖片寶貝展示列表都是正方形的排版布局，這樣要求上傳合適正方形寶貝封面圖片，也是讓圖片不變形。
所以有條件的情況下，大家將首頁、圖片列表頁的布局寬度高度保持一致，上傳圖片時候將圖片先進行處理為布局寬度高度時等比例放大尺寸的。
第二種，使用CSS max-width和max-height實現圖片自動等比例縮小
很簡單我們要使用到max-width和max-height,這樣即可設置對象圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖片相對不變形清晰。
以下DIVCSS5通過實例對比方法讓大家掌握CSS控制圖片縮小不變形技巧。
一、原始描述 - TOP
這里有個DIV盒子（DIV class命名為"divcss5"）CSS寬度和CSS高度方便為300px和100px同時設置1px黑色邊框，里面放了一張圖片（圖片原始寬度650px為高度為406px）。並通過CSS固定死圖片寬度高度。
1、HTML源代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>圖片縮小不變形實例 www.divcss5.com</title>
- <style>
- .divcss5{ border:1px solid #000; width:300px; height:100px}
- .divcss5 img{width:300px; height:100px}
- </style>
- </head>
- <body>
- <div class="divcss5">
- <img src="img.jpg" />
- </div>
- </body>
- </html>
2、CSS固定死圖片寬度高度實例截圖
原始圖片展示：
原始圖片截圖
css固定寬度高度后變形的圖片截圖
3、小結，通過CSS固定對象內圖片高度寬度，這樣圖片如果不是等比例縮小，那么圖片就變形了。
二、CSS解決圖片縮小不變形實例 - TOP
使用max-width:300px或max-height:100px，即可解決圖片比例縮小。但這樣存在一個問題，如果按照寬度縮放，但圖片過 高會超出溢出盒子，這個時候需要對父級使用overflow:hidden隱藏超出圖片內容。但是使用max-width或max-height，IE6 不支持，我們需要設置個width:expression(this.width > 300 ? "300px" : this.width);或者 height:expression(this.height>100?"100px":this.height);。
解決IE6支持max-height
div css解決IE6支持max-width
一般情況下只需要設置好寬度限制，比如這里只設置最大寬度為300px(max-width:300px),然后對父級使用overflow:hidden隱藏溢出圖片，同時為了兼容IE6我們設置個width:expression(this.width > 300 ? "300px" : this.width);解決即可。
1、具體解決DIV+CSS實例代碼如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>圖片縮小不變形實例 www.divcss5.com</title>
- <style>
- .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
- .divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
- </style>
- </head>
- <body>
- <div class="divcss5">
- <img src="img.jpg" />
- </div>
- </body>
- </html>
2、瀏覽器測試效果截圖
css圖片縮小等比例縮小后不變形截圖
3、缺點介紹，如果使用此方法，兼容各大瀏覽器不變形，但圖片不是完整顯示的。
相關知識介紹：
CSS解決圖片撐破DIV：http://www.divcss5.com/wenji/w364.shtml
CSS圖片不超過網頁寬度：http://www.divcss5.com/jiqiao/j52.shtml
4、在線演示：查看案例
5、實例打包下載
三、css圖片大小縮小不變形總結 - TOP
CSS DIV圖片縮小不變形總結：最好解決方法就是從設計圖片本 身出發，將圖片設計成與布局中寬度高度成等比例圖片，比如你布局時候圖片寬度為300px，高度為200px,那你設計圖片素材時候提交添加的圖片寬度高 度本身可以為600px寬，400px高，或900px寬600px高,這樣等比例的圖片才能保證真正圖片縮小后不變形，顯示完整。