jquery - 保持图像居中，同时它会根据浏览器大小按 % 更改大小？

Question

如何将此图像居中，同时保持图像大小的百分比，以便它随浏览器改变大小？我一直在玩弄这张图片上的 css，让它调整高度和宽度 http://www.georgewoolfe.com/home.html

这是CSS:

#image {
    bottom: 50%;
    height: 40%;
    left: 50%;
    margin: 0 -40%;
    position: absolute;
    right: 50%;
    top: 56px;
    width: 80%;
}

#image img {
    width: 100%;
}

我还想知道是否有一些 jQuery 可以做到这一点？

我发现这个网站完全符合我的意思 http://www.laurabartlettgallery.com/exhibitions/bravo-zebra/

谢谢安吉拉

Answer 1

HTML:

<div id="imageWrapper">
    <img src="http://www.georgewoolfe.com//images/Cecily-Brown_CecilyBrown02.jpg" alt="">
</div>

CSS:

#imageWrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px 20px;
    text-align: center;
}
#imageWrapper img {
    width: 100%;
    max-width: 433px;
}