原理： each（）遍历，width（）、height（）获取宽高， load（）
注意：
由于页面加载完了，但图片不一定加载完了，所以直接通过 $("img").width()，$("img").height() 是无法稳定获取到img的准确尺寸，或为0，或偶尔为0；
解决方法： load（），元素加载完了之后执行；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片自适应</title>
<script src=‘./js/jquery-1.9.0.min.js‘></script>
<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">
<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/[email protected]" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/bg.jpg" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/img1.png" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/[email protected]" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/img2.png" class=‘auto_img‘>
</div>
</body>
<script>
function imgAuto ( obj ) {
if( $(obj).width() <= $(obj).height() ) {
$(obj).addClass(‘auto_img_Width‘);
} else {
$(obj).addClass(‘auto_img_Height‘);
}
}
$(function () {
$(‘.auto_img‘).each(function () {
$(this).load(function () {
console.log( $(this).width() +‘:‘+ $(this).height());
imgAuto(this);
})
})
})
</script>
</html>
图片原始图： 
效果图： 
缺点： 丢失了图片的部分边角； 优点： 保持了图片的比例，不变形
时间： 2024-10-13 11:13:15