之前也遇到过这个问题，已经忘了怎么解决的了，显然当时并没有找到问题的根本原因。
其实这个问题解决起来也简单（我一开始没有想到），之所以会变形，是因为受到不知从哪来的widht：100%和height：100%影响，这种情况即使我设置了max-width和max-height也不能改变图片的显示样式。而只有直接在标签上设置width：auto和height：auto属性，才能够覆盖掉不知来源的width和height。这就是最终的解决方案（直到找到问题原因时，我才反应过来）。
一开始我都是围绕找问题原因来展开的，因为在deformity.css文件中有设置图片的样式，于是我尝试在里面增加了max-width和max-height属性，打包，用后端同事电脑部署到服务器上。登录系统查看结果，接口请求的是最新的deformity.css，但是应用到元素上的样式并未改变。
这时候我发现不明来历的样式是在打包文件vendor.js中，但是我并没有意识到去webpack.config.js中查看vendor是由哪些源文件打包生成的。我采取的方法是删除deformity.css文件，打包，可想而之vendor.js内容仍旧。到这个时候我才意识到，这个vendor文件是由依赖包打包生成的，这里有"react", "react-dom","monkeyui"三个，很显然是monkeyui搞的鬼，结果没错。
这个原因排查的过程确实够久的，有经验的开发人员应该很快就能定位到问题，但对我来说，能够一步步排查、分析，最终找到问题并解决，以后遇到类似问题就不会怕了。
