通过JS脚本控制图片等比缩放

2019独角兽企业重金招聘Python工程师标准>>>

假设原始图片的高宽为：248px*636px

Html代码：

<div id="container" style='text-align: center; vertical-align: middle;margin-right: auto;margin-left: auto;'>
        <img width='100%' height='100%' src='resources/images/jisu-header.png' />

</div>

 

JS代码：

function () {
        var maxH = 248, maxW = 636;//原始图片高宽

        //设置图片的高度和宽度，根据图片比例设置高度
        var container=document.getElementById("container");

        if (Ext.os.deviceType == "Phone") {
            var width = document.body.clientWidth;//获取屏幕宽度
            var height = (maxH / maxW) * width;//根据宽度计算高度
            if (width < 640) {
                container.style.height=height+'px';
            } else if (width >= 640) {

                container.style.height=maxH+'px';

                container.style.width=maxW+'px';

            }
        }
        else {
                container.style.height=maxH+'px';

                container.style.width=maxW+'px';

        }

    }

 

转载于:https://my.oschina.net/caimingkai/blog/351391