图片按比例缩放

最新推荐文章于 2022-05-03 17:18:27 发布

最新推荐文章于 2022-05-03 17:18:27 发布 · 152 阅读

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文提供了一段JavaScript代码，用于实现图片元素在不同分辨率屏幕上的自适应缩放功能。该方法通过检测图片原始尺寸与目标尺寸的比例，确保图片在保持宽高比不变的情况下进行缩放。

<script>
function resizeImg(){
  var imgElement = document.getElementById('imgElement');
     var iWidth = 180;
     var iHeight = 140;
     if(imgElement){
         if(imgElement.width/imgElement.height>=iWidth/iHeight){
             if(imgElement.width>iWidth){
                    imgElement.height = imgElement.height*iWidth/imgElement.width;
                    imgElement.width = iWidth;               
                }
            }else{
                if(imgElement.height>iHeight){
                    imgElement.width=imgElement.width*iHeight/imgElement.height;
                    imgElement.height=iHeight;
                }
            } 
        }
 }
</script>