无论浏览器大小如何，始终保持图像居中

Question

我想知道是否可以将img 保持在div 中，无论浏览器大小如何，都始终居中？居中是指图像的左/右侧被裁剪以确保图像保持居中而不修改高度。另外，当浏览器宽度小于图像宽度时，是否可以防止出现水平滚动条？

如果我的图像位于 CSS 中的 background-url 标记中，我确信这真的很容易做到，但由于此图像位于 SlidesJS 轮播中，因此图像必须来自 img 标记。

目前，只要浏览器宽度大于图像，我就使用margin:0 auto; 来保持图像居中。一旦浏览器宽度缩小，图像不会随着浏览器尺寸的缩小而调整。我还没有弄清楚当浏览器宽度太小时如何删除水平滚动条。

这就是我想要实现的目标：http://imgur.com/Nxh5n

这是页面布局的示例：http://imgur.com/r9tYx

我的代码示例：http://jsfiddle.net/9tRZG/

HTML：

<div id="wrapper">
    <div id="slides">
        <div class="slides_container">
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
        </div>
    </div>
</div>​

CSS：

#wrapper {
    width: 200px;
    margin: 0 auto;
}​

Answer 1

试试这个：http://jsfiddle.net/9tRZG/1/

#wrapper {
    max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
    margin: 0 auto;
}
#wrapper img{
    width:100%;       /* the image will now scale down as its parent gets smaller */
}
​

要裁剪边缘，您可以这样做：http://jsfiddle.net/9tRZG/2/

#wrapper {
    max-width: 600px; /* so this will scale down when the screen resizes */
    margin: 0 auto;
    overflow:hidden;  /* so that the children are cropped */
    border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}

#wrapper .slides_container{
    width:600px;            /* static width here */
    position:relative;      /* so we can position it relative to its parent */
    left:50%;               /* centering the box */
    margin-left:-300px;     /* centering the box */
}
#wrapper img{
    display:block;          /* this allows us to use the centering margin trick */
    margin: 2px auto;       /* the top/bottom margin isn't necessary here, but the left/right is */
}

Answer 2

Jeff Hines 链接了 putting image always in center page，ShankarSangoli 解释了如何实现这一目标。

img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

Answer 3

我不确定对齐中心是否适合我的滚动条。 您可以使用以下内容：

overflow-x: hidden;