有几个方法，各有优劣 你自己斟酌，部分也说不细需要你自己百度具体做法：
定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易操作，兼容性好，坏处很多，图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。
设为背景图使用css3的background-size配合background-position来解决，contain和cover两个值效果不错，基本能解决你想要的所有效果，缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。
使用css3的flex定位，网上有具体的操作，一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准，基本能解决你的问题，缺点是，学习成本高，兼容性稍差，有些手机上表现有问题。
js方案，都js了自己写就是了。缺点是需要用js，写不好会有bug，相对麻烦一些，加载时候页面可能会有抖动。
服务器方案，客户上传的图片到服务器走一圈，做成自己希望的大小，而且有一个服务器插件不仅可以截取到目的大小而且还能针对图片内容截取（例如尽可能保留人物面部、智能判断页面重点），这个试过效果很不错，不过具体哪个插件不记得了，估计搜也能搜到。优点是比较智能自己设置好了几乎完美，几乎不再需要麻烦的css，页面也相对比较规整，缺点是需要服务器端支持。
如果可以比拘泥于容器，让容器兼容图片，网上有很多的gallery插件，类似谷歌图片，摆布也不错，优点是不用考录图片和div的问题了，缺点是需要从新设计及相关技术....
1、首先需要新建一个HTML页面。
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%height:auto}，这样就完成了。
