关于js控制图片显示的问题，急求，谢大神！！！

Question

页面上有一个栏目，该DIV层大小固定，比如400400，照片需要经常替换，照片的尺寸不固定，可能是横版也可能是竖版的。如何设置JS+CSS，使照片只显示400400像素（照片主体内容需显示完整），四周隐藏，而不致图片失真呢？网上找的方法1：但是显示不完整<div style="width:400px;height:400px;overflow:hidden;"><img src="123.jpg" onload="this.style.marginTop=500-this.height;this.style.marginLeft=500-this.width;" /></div>方法2.onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.style.width) - this.width) /2 + 'px'"和方法1基本没啥差别，图片显示不完全，比如1400*500的图片，只显示了右下角一点点，内容都不完整了大神们求好的方法？？？？？

Answer 1

多图的话, 可以js 每次切换缓存一个图片

var image = document.createElement( "img" );image.src = " 
gif?t=1480320379589"

console.log:

image.height120image.width80

然后再在你需要显示的div中通过backgroud指定图片的position来控制, 尺寸有了, 位置自己写一个算法即可