图片根据容器等比缩放并居中

1.引入JQ(这里用到JQ插件)
2.写html

<div class="CardNoBox">
		<img :src="imgF" alt="" class="CardNoImg" id="CardNoImgF">
</div>

3.添加css样式，由于css样式只截取一部分，同行们可自动补全

.CardNoBox {
	width: 92%;
	border: 1px solid #e2e2e2;
	height: 160px;
	text-align: center;
	line-height:160px;
    font-size: 18px;
    color: #999;
    font-weight: bold;
    padding:4%;
    margin-bottom:0.2rem;
    position: relative;
}
.CardNoImg{
	position:absolute;
	left:50%;top:50%;
}

4.封装方法

/***************封装方法前，先获取到容器宽高*******************/
var CardNoBoxW = $(".CardNoBox").eq(0).width()			// 图片容器宽
var CardNoBoxH = $(".CardNoBox").eq(0).height()			// 图片容器高
/*
*  imgWH() 获取到图片容器宽高比例,让图片根据最长端等比缩小
*  如果让图片上下/左右居中对齐则添加调整图片位置代码反则注释
*  classN 可以是class/ID/标签
*
*  **调用imgWH方法,要求在图片获取完执行**
* */
function imgWH(classN){
   $("