頭像框爲正方形,而用戶上傳的圖像可能是正方形,也可能是橫向或者縱向的長方形,直接設置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 ]
擴展圖像以最短邊覆蓋區域爲準,正好滿足覆蓋頭像框的需要。