1.先给你的图片外面加一个DIV，设置好想要的高宽，例如我们想要的图片宽度为 240px，高度为183px，那么写法如下：

<div style="width: 240px; height: 183px; overflow: hidden"> <!--div设置好需要的高宽-->
	<img src="img.jpg">              
</div>
<script>
//列表图按比例片无拉伸处理
$('div').each(function (){
	var img = $(this).find('img'); //获取图片
	var i_w = $(this).width();  //获取需要的图片宽度
	var i_h = $(this).height(); //获取需要的图片高度
	var b = i_w/i_h;            //计算需要的图片高宽比（宽度/高度）
	var w = img.width();        //获取图片原始宽度
	var h = img.height();       //获取图片原始高度
	var vs = w/h;               //计算图片比例
	if (vs < b){  //计算图片高宽比，如果高宽比比较高
		img.css({width:i_w+'px'});       //设置图片宽度为目标宽度
		var h = (img.height() - i_h) / 2; //计算图片减去目标高度后剩余高度除以2
		img.css({marginTop:'-'+h+'px'});  //向上移动，保持图片垂直剧中	
	}else{       //计算图片高宽比，如果高宽比比较宽
		img.css({height:i_h +'px'});        //设置图片高度为目标高度
		var w = (img.width() - i_w) / 2;  //计算图片减去目标宽度后剩余宽度除以2
		img.css({marginLeft:'-'+w+'px'}); //向左移动，保持图片左右剧中
	}
});
 </script>

按照上面的做法，你只要给图片外面的DIV设置好想要的图片高宽即可，然后图片会根据你设置好的尺寸进行上下或左右剧中，这个取决于你的图片实际尺寸了。例如你的图片实际高度大于你设置的高宽比，它会以你想要的宽度展示，而高出的部分会自动居中显示，而宽度高出你想要的高宽比，则会按照你想要的高度进行显示，宽出来的部分则会自动居中显示。这样免去了自动裁剪的流程，在前端就可以直接实现你想要的效果。但是图片如果特别特别大的话，原则上是会影响访问速递，但是通常来说可以正常上传到服务器上的图片也不会很大，这个取决于你自己服务器或网站的设置了。

如果你还有更好的方法的话欢迎留言讨论！

最终效果：

补充：

还有一个单纯用css实现的方法，但是IE是不支持的！

img{ width: 240px; height: 183px; object-fit:cover ;}

只需要这么一句就OK了！下面是 object-fit 属性的一些演示效果：

完！