任意圖片等比例縮放填充正方形頭像框

頭像框爲正方形，而用戶上傳的圖像可能是正方形，也可能是橫向或者縱向的長方形，直接設置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 ]

擴展圖像以最短邊覆蓋區域爲準，正好滿足覆蓋頭像框的需要。