mind：自适应布局图片在网页上进行宽高比的缩放
1.head标签内
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
2.对img标签进行控制，前提是引入jQuery文件，可引入cdn---
<script>
$(function () {
var imglist = document.getElementsByTagName("img");
// $("img").attr('style', '');
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持
var _width;
doDraw();
// 监控窗口变化：onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数
window.onresize = function () {
doDraw();
}
//宽高按比例变化
function doDraw() {
//window.innerWidth 为当前屏幕的宽度
_width = window.innerWidth;
for (var i = 0, len = imglist.length; i < len; i++) {
//调用重绘页面方法
DrawImage(imglist[i], _width);
}
}
//重绘页面
function DrawImage(ImgD, _width) {
var image = new Image();
image.src = ImgD.src;
image.onload = function () {
if (image.width > _width) {
ImgD.style.width = "";
ImgD.style.height = "";
ImgD.width = _width;
// 高度按比例缩小
ImgD.height = (image.height * _width) / image.width;
} else {
ImgD.style.width = "";
ImgD.style.height = "";
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
})
</script>
<img>标签下方会出现白色的空隙
原因：<img>是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显
解决办法：
https://blog.csdn.net/qq_43650522/article/details/108791982
