在中对于图片列表或图片排版时图片不是固定宽度高度大小，但图片占位是固定宽度高度这个时候如果使用固定死图片大小（宽度 高度），这个时候如果图片相对于這个位置不是等比例大小那么这张图片就会变形，让图片变的不清晰这个时候想让图片不变形又按比例缩放，如何解决缩小不变形，图片自动缩小图片按比例等比例缩小不变形解决。
第一种让图片和布局宽度高度成等比例，这样CSS设置死和图片也是等比例缩小，圖片也不会变形
比如淘宝，要求店铺主上传产品封面图片是正方形的为什么，因为图片宝贝展示列表都是正方形的排版布局这样要求上传合适正方形宝贝封面图片，也是让图片不变形
所以有条件的情况下，大家将首页、图片列表页的布局宽度高度保持一致上传图爿时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。
第二种使用和实现图片自动等比例缩小
很简单我们要使用到和max-height,这样即可設置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片然图片相对不变形清晰。
以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片縮小不变形技巧
这里有个（为"divcss5"）和方便为300px和100px同时设置1px黑色边框，里面放了一张图片（图片原始宽度650px为高度为406px）并通过CSS固定死图片宽度高度。
2、浏览器测试效果截图
css图片缩小等比例缩小后不变形截图
3、缺点介绍如果使用此方法，兼容各大浏览器不变形但图片不是完整顯示的。
图片缩小不变形总结：最好解决方法就是从设计图片本身出发将图片设计成与布局中宽度高度成等比例图片，比如你布局时候圖片宽度为300px高度为200px,那你设计图片素材时候提交添加的图片宽度高度本身可以为600px宽，400px高或900px宽600px高,这样等比例的图片才能保证真正图片缩小後不变形，显示完整
如需转载，请注明文章出处和来源网址：
