关于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&nbsp;image&nbsp;=&nbsp;document.createElement(&nbsp;"img"&nbsp;);image.src&nbsp;=&nbsp;"&nbsp; gif?t=1480320379589"console.log:image.height120image.width80然后再在你需要显示的div中通过backgroud指定图片的position来控制, 尺寸有了, 位置自己写一个算法即可