Bootstrap图文列表缩略图大小不一致问题

一.如果上传的图片大小不一致会有下图结果

二.解决方案 

方式一：给图片加上固定的宽高值

<img src="/test.jpg" alt="..." width="100%" height="100px">

解决了图片列表大小不一，排列错乱的问题，缺点：一是图片变形

方式二：将图片按比例裁剪成固定像素宽高的图片

网上插件很多，我用的是jQThumb 

1.引入插件

<!-- jQThumb缩略图插件 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jqthumb.min.js"></script>

2.编写图片加载后裁剪方法

	//处理缩略图
	function DrawImage(hotimg){
		$(hotimg).jqthumb({
			width : '100%',//宽度
			height : '142px',//高度
			//position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
			zoom : '1',//缩放比例
			method : 'auto'//提交方法，用于不同的浏览器环境，默认为‘auto’
		});
	}

3.引用裁剪方法

<!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" >
    <div class="thumbnail">
	    <img src="${APP_PATH}/static/upload/goods_1.jpg" alt="..."  class="img-responsive" onload="DrawImage(this)" >
	    <div class="caption">
	        <h4>白灼虾</h4>
	        <p style="color:red;">
		        开胃消食、清热去火、抗衰老、增强抵抗力
		    </p>
		</div>
    </div>
</div>

4.最终效果