mind：自適應(yīng)布局圖片在網(wǎng)頁(yè)上進(jìn)行寬高比的縮放
1.head標(biāo)簽內(nèi)
<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.對(duì)img標(biāo)簽進(jìn)行控制，前提是引入jQuery文件，可引入cdn---
<script>
$(function?()?{
????????var?imglist?=?document.getElementsByTagName("img");
? ? ? ? //?$("img").attr('style',?'');
????????//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系統(tǒng)支持
????????var?_width;
????????doDraw();
????????//?監(jiān)控窗口變化：onresize屬性可以用來(lái)獲取或設(shè)置當(dāng)前窗口的resize事件的事件處理函數(shù)
????????window.onresize?=?function?()?{
????????????doDraw();
????????}
????????//寬高按比例變化
????????function?doDraw()?{
????????????//window.innerWidth?為當(dāng)前屏幕的寬度
? ? ? ? ? ? _width?=?window.innerWidth;
????????????for?(var?i?=?0,?len?=?imglist.length;?i?<?len;?i++)?{
????????//調(diào)用重繪頁(yè)面方法
????????????????DrawImage(imglist[i],?_width);
????????????}
????????}
????????????//重繪頁(yè)面
????????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>標(biāo)簽下方會(huì)出現(xiàn)白色的空隙
原因：<img>是一種類似text的標(biāo)簽元素，在結(jié)束的時(shí)候，會(huì)在末尾加上一個(gè)空白符（匿名文本），導(dǎo)致下方會(huì)多出來(lái) 3px 間距，其實(shí)我們?cè)趇mg右側(cè)添加一個(gè)span包裹住文本，現(xiàn)象會(huì)更明顯
解決辦法：
https://blog.csdn.net/qq_43650522/article/details/108791982
