js控制图片在容器中充满显示,超出取中间部分

函数如下:

function fitImage(objDiv, objImg) {
    var divWidth = objDiv.offsetWidth;      //容器的宽
    var divHeight = objDiv.offsetHeight;    //容器的高			
    var imgWidth = objImg.width;    //图片的宽
    var imgHeight = objImg.height; //图片的高
    var imgScale = '';   //图片缩放倍数
    var divRatio = (divWidth / divHeight);  //容器宽高比
    var imgRatio = (imgWidth / imgHeight);  //图片宽高比
	
    if(divRatio >= imgRatio){
	imgScale = divWidth / imgWidth;
    }else{
	imgScale = divHeight / imgHeight;
    } 
    objImg.style.width = (imgWidth * imgScale) + 'px';
    objImg.style.height = (imgHeight * imgScale) + 'px';
    objImg.style.marginLeft = (divWidth - objImg.width) / 2 + 'px';
    objImg.style.marginTop = (divHeight - objImg.height) / 2 + 'px';	
}

使用方法:

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

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

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

发表评论

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