1.实现代码

<div style="position: relative;"><img src="#" onload="ImgOnload(this)" style="postition:absolute;" />
</div>

function ImgOnload(p_Obj){if(p_Obj.offsetHeight/p_Obj.parentElement.offsetHeight>=p_Obj.offsetWidth/p_Obj.parentElement.offsetWidth){let v_NewWidth = p_Obj.offsetWidth*p_Obj.parentElement.offsetHeight/p_Obj.offsetHeight;p_Obj.style.left = (1 - v_NewWidth/p_Obj.parentElement.offsetWidth)/2*100 + "%";p_Obj.style.top = "0";p_Obj.style.height = "100%";p_Obj.style.width = "auto";}else{let v_NewHeight = p_Obj.offsetHeight*p_Obj.parentElement.offsetWidth/p_Obj.offsetWidth;p_Obj.style.left = "0";p_Obj.style.top = (1 - v_NewHeight/p_Obj.parentElement.offsetHeight)/2*100 + "%";p_Obj.style.width = "100%";p_Obj.style.height = "auto";}
}

2.源码解释

上面HTML代码之所以需要使用定位是因为需要让等比缩小后的图片需要在容器中始终居中

• ImgOnLoad()函数解释如下