缩小图像上载（Jquery）

Question

如何缩小图像并始终使用Jquery居中？首先，我只想显示图像的某些部分。请参阅此图片：

某些部分=已经聚焦的图像（上面没有白色透明背景）

缩小时，我希望它始终居中。并希望缩小onload。我怎么能这样做？

Answer 1

解决！ ：d

使用中心背景位置和边距+ javascript。这是完成的代码：

CSS

#zoom-box {
    background-image: url('test.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 3548px;
    height: 1653px;
    margin: -500px 0 0 -950px;
}

的Javascript

$('#zoom-box').animate({
    width:'800px',
    height:'373px',
    margin: '0'
}, 5000);

HTML

<div style="background-color: grey; width: 800px; height: 373px; overflow: hidden; margin: 0 auto;">
    <div id="zoom-box"></div>
</div>

这是JSFiddle：http://jsfiddle.net/93Wxw/

非常感谢Iszuddin Ismail（kidino）。 ：d