本篇文章主要的介绍了关于html img标签图片的等比例缩放的介绍和使用实例，最后还有关于html img标签图片等比例缩放的总结，接下来让我们一起来看这篇文章吧

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

在DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。

一、让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。

比如淘宝，要求店铺主上传产品封面图片是正方形的，为什么，因为图片宝贝展示列表都是正方形的排版布局，这样要求上传合适正方形宝贝封面图片，也是让图片不变形。

所以有条件的情况下，大家将首页、图片列表页的布局宽度高度保持一致，上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。

二、使用CSS max-width和max-height实现图片自动等比例缩小

很