有几个方法，各有优劣 你自己斟酌，部分也说不细需要你自己百度具体做法：
定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易操作，兼容性好，坏处很多，图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。
设为背景图使用css3的background-size配合background-position来解决，contain和cover两个值效果不错，基本能解决你想要的所有效果，缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。
使用css3的flex定位，网上有具体的操作，一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准，基本能解决你的问题，缺点是，学习成本高，兼容性稍差，有些手机上表现有问题。
js方案，都js了自己写就是了。缺点是需要用js，写不好会有bug，相对麻烦一些，加载时候页面可能会有抖动。
服务器方案，客户上传的图片到服务器走一圈，做成自己希望的大小，而且有一个服务器插件不仅可以截取到目的大小而且还能针对图片内容截取（例如尽可能保留人物面部、智能判断页面重点），这个试过效果很不错，不过具体哪个插件不记得了，估计搜也能搜到。优点是比较智能自己设置好了几乎完美，几乎不再需要麻烦的css，页面也相对比较规整，缺点是需要服务器端支持。
如果可以比拘泥于容器，让容器兼容图片，网上有很多的gallery插件，类似谷歌图片，摆布也不错，优点是不用考录图片和div的问题了，缺点是需要从新设计及相关技术....
1 background-size:auto/* 默认值，不改变背景图片的高度和宽度 */2 background-size:100px 50px/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
3 background-size:10%/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
4 background-size:cover/* 将背景图片等比缩放填满整个容器 */
5 background-size:contain/* 将背景图片等比缩放至某一边紧贴容器边缘 */
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px
text-align: center
font-size: 4em
color: #333
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>
