JS如何使照片只显示居中部分的500*500像素，四周隐藏。

Question

我想在页面上设一个照片栏，该DIV层大小为500*500像素，照片需要经常替换，照片的尺寸不固定，可能是横版也可能是竖版的。如何设置JS+CSS，使照片只显示居中部分的500*500像素，四周隐藏。
网上搜了一下，大多是一些已知照片大小后margin-top之类的裁剪。先前在CSS区也发了帖子，可能纯CSS不行，再贴到JS区，求适合我的JS+CSS代码。

Answer 1

如果不需要考虑浏览器兼容的话，在CSS里用expression差不多可以，也就是说纯CSS其实也是可以的。
但考虑浏览器兼容的话，似乎就得用CSS+JS了。原理和你说的用margin-top之类的裁剪是一样的。
<div style="width:500px;height:500px;overflow:hidden;"><img src="大图片.jpg" 
 onload="this.style.marginTop=500-this.height;this.style.marginLeft=500-this.width;" /></div>
这样的话，当你随时改变了IMG的SRC之后，就会自动调整显示区。

Answer 2

LS的方法的marginTop和marginLeft属性设定应该参照标准加'px', 且位置计算错误应改为
onload="this.style.marginTop = (500-this.height)/2+'px';this.style.marginLeft=(500-this.width)/2+'px';"同时, 由于500px是与父div有关, 所以更加通用的方法:
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'"
这里不受500px约束, 可以任意改变外层div的宽高, 内部图片会自动居中, 不论大小. lz可以试一下

Answer 3

原想着代码大概示意一下路子，没想太正式，因为楼主已经提到使用margin-top了，所以我认为正确位置楼主应该已经懂得如何得到了。

Answer 4

我的问题和楼主的差不多，但是我那个div里面放的不是图片而是一个flash。那要怎么去除四周多余的部分只留中间的呢？？？麻烦各位高手指点下