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

Bertha 。 2022-03-22 10:18 362阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70][]

## 二.解决方案  ##

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

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

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

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

1.引入插件

<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.引用裁剪方法

<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.最终效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70]: /images/20220322/c165c45753f247d7b2169d7ffd458574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70 1]: /images/20220322/a6946b0f92d2465e9410d2b7952d4312.png