js控制图片在容器内按比例完整显示

函数如下:

function center_img(dom) {
    dom.style.visibility = 'hidden';
    var pWideth = dom.parentNode.offsetWidth;
    var pHeight = dom.parentNode.offsetHeight;
    var Wideth = dom.width;
    var Height = dom.height;
    if(Wideth >= Height){
	dom.width = pWideth;
	if(dom.height >= pHeight){
	    dom.width = dom.width * pHeight / dom.height;
	    dom.height = pHeight;	
	}	
	}else{
	    dom.height = pHeight;
	    if(dom.width >= pWideth){
            dom.height = dom.height * pWideth / dom.width;
            dom.width = pWideth;	
	}	
    }
    dom.style.marginLeft = (pWideth - dom.width) / 2 + 'px';
    dom.style.marginTop = (pHeight - dom.height) / 2 + 'px';
    dom.style.visibility = 'visible';
}

使用方法:

<div style="width: 100px;height: 100px;border: 1px solid #f00;overflow: hidden;" >
    <img src="../image/2.jpg" onload="center_img(this)" />
</div>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。