原理： each（）遍歷，width（）、height（）獲取寬高， load（）
根據圖片初始比例和圖片容器的寬高比例做自適應（全部鋪滿容器）
注意：
由於頁面加載完了，但圖片不一定加載完了，所以直接通過 $("img").width()，$("img").height() 是無法穩定獲取到img的准確尺寸，或為0，或偶爾為0；
解決方法： load（），元素加載完了之后執行；
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片自適應</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src='./js/jquery-1.9.0.min.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: inline-block;
}
.autoImg {
width: 50px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
margin: 3px;
}
/*固定寬 高自適應 全鋪滿*/
.auto_img_Width {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
/*固定高 寬自適應 全鋪滿*/
.auto_img_Height {
position: absolute;
top: 0;
left: 50%;
width: auto;
height: 100%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="autoImg">
<img src="./img/girl_pic@2x.png" alt="" class='auto_img'>
</div>
<div class="autoImg">
<img src="./img/bg.jpg" alt="" class='auto_img'>
</div>
<div class="autoImg">
<img src="./img/img3.png" alt="" class='auto_img'>
</div>
<div class="autoImg">
<img src="./img/girl_pic@2x.png" alt="" class='auto_img'>
</div>
<div class="autoImg">
<img src="./img/img2.png" alt="" class='auto_img'>
</div>
<div class="autoImg">
<img src="./img/img4.png" alt="" class='auto_img'>
</div>
</body>
<script>
$(function () {
$('.auto_img').each(function (index) {
var ind = index;
$(this).load(function () {
var ratioT = $(this).width()/$(this).height(); //初始圖片的寬高比
var ratioP = $(this).parent().width()/$(this).parent().height(); //圖片容器的寬高比
console.log('父元素：'+ '寬高比：' + ratioP + ' 寬:'+$(this).parent().width() +' 高:'+ $(this).parent().height()+ ' 索引:'+ ind);
console.log( '初始圖片：'+ '寬高比：' + ratioT + ' 寬:'+$(this).width() +' 高:'+ $(this).height()+ ' 索引:'+ ind);
if ( ratioT <= ratioP ) {
$(this).addClass('auto_img_Width');
} else {
$(this).addClass('auto_img_Height');
}
})
})
})
</script>
</html>
圖片原始圖： 
效果圖： 
缺點： 丟失了圖片的部分邊角； 優點： 保持了圖片的比例，不變形