解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
响应式切图可以去了解一下媒体查询。通过媒体查询当前设备视图区的宽度，来调整整体页面的布局。
响应式切图更多的是我们要用web前端开发传统应用程序，我们做pc端，移动端，各种响应式，web 游戏，web 企业管理系统，web 移动程序，开发一个大规模项目，html5游戏，甚至用js开发传统高级语言才能做的数据库交互，不用后台语言，就靠我们js做后台。
响应切图误区：
响应式切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，首先处理的是什么类型的页面图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等），把图片切出来这个过程是叫切片。
响应式第二个是体积，所以切图时候一定注意少用图片工具，采用div+css布局更能减小网页体积是表现与内容分离。
