任意图片等比例缩放填充正方形头像框

头像框为正方形，而用户上传的图像可能是正方形，也可能是横向或者纵向的长方形，直接设置img的width和height将可能导致图像拉伸变形，为了使图像的最短边填充满头像框进行等比例缩放，博主想了许多办法。此处假设头像框是边长为48px的正方形。

方案一

img{
width：auto;
heigth:auto;
max-width:48px;
max-height:48px;
}

结果是图片按最长边为48px等比例缩放,未填满头像框。

方案二 用js调整图片的长宽

<script type="text/javascript">
        /******最完美解决 图片在图片框内按宽高比例自动缩放！！！***/
        //Img:要放图片的img元素，onload时传参可用this
 
        //maxHeight  :img元素的高度，像素（图片框 最大高度）
 
        //maxWidth:img元素的宽度，像素（图片框 最大宽度）
        function AutoSize(Img, maxWidth, maxHeight) {
            var image = new Image();
            //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
            image.src = Img.src;  
            // 当图片比图片框小时不做任何改变 
            if (image.width < maxWidth&& image.height < maxHeight) {
                Img.width = image.width;
                Img.height = image.height;
            }
            else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
            {
                if (maxWidth/ maxHeight  <= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例
                {
                    Img.width = maxWidth;   //以框的宽度为标准
                    Img.height = maxWidth* (image.height / image.width);
                } 
                else {   //原图片宽高比例 小于 图片框宽高比例
                    Img.width = maxHeight  * (image.width / image.height);
                    Img.height = maxHeight  ;   //以框的高度为标准
                }
            }
 
        }
    </script>

非常复杂，博主最后使用模板绑定img没有成功，遂弃之。

方案三 最后博主终于找到一个简单有效的方式，将img标签换成div,并将头像图片设置为背景图片，将background-size属性设置为cover.

.portrait{
background:url(imgUrl);
background-size:cover;
width:48px;
height:48px;
}

成功。background-size:cover属性的解释是：

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。 —— [ w3school ]

扩展图像以最短边覆盖区域为准，正好满足覆盖头像框的需要。