bootstrap模态弹窗显示大图,自动伸缩比例大小

需求：bootstrap的table里面显示图片的缩略图，点击查看大图（图片长宽比例一定，大小不变）。
思路：
1、在bootstraptable里面用formatter中进行数据处理，点击为缩略图添加弹出模态框的两个属性（如下所示）。

       $("#bigImg").attr("data-toggle","modal");
       $("#bigImg").attr("data-target","#imgZoomInModal");//后面值为模态框的id

2、弹出之后为模态框中的图片添加src属性，src的值由点击缩略图时传递。（见如下的imgZoomIn方法）

{
   field: 'xqimg',
    title: '详情照片',
    align: 'center',
    formatter: function(value,row,index){
        return '+value+'" style="width:70;height:70px;" οnclick="imgZoomIn(\''+value+'\');" class="img-rounded" >';
    },
    events: 'operateEvents'
},

3、然后设置模态框的图片显示比例。

主要是分为两步：
	第一步设置模态框的自动缩放大小。其实就是在.modal-dialog 样式上做文章，
	关键三点：
			用 display: inline-block；
			父节点用 text-center 样式居中；
			重置宽度 width: auto
	

具体代码

html：

<div id="imgZoomInModal" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm"  style="display: inline-block; width: auto;">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" id="bigImg"/>
            div>
        div>
    div>
div>

表格字段js代码：

{
   field: 'xqimg',
   title: '详情照片',
   align: 'center',
   formatter: function(value,row,index){
       return '+value+'" style="width:70;height:70px;" οnclick="imgZoomIn(\''+value+'\');" class="img-rounded" >';
   },
   events: 'operateEvents'
},

js方法imgZoomIn（）：

function imgZoomIn(src){
    $("#bigImg").attr('src',src);
    $("#bigImg").attr("data-toggle","modal");
    $("#bigImg").attr("data-target","#imgZoomInModal");
    $("#bigImg").css("height",$(this).height()*0.5);//设置弹窗图片的比例,具体大小由自己情况修改
    $("#imgZoomInModal").modal("show");
}

菜鸟一枚,本来是java后端的,记录下js有关的使用方法.大佬们见笑了