保持图像始终居中，无论浏览器大小 [英] Keep an Image Always Centered Regardless of Browser Size

问题描述

我想知道是否可以在 div 内保持 img ？通过居中我的意思是图像的左/右边被裁剪，以确保图像保持中心，而不修改高度。此外，当浏览器宽度小于图像宽度时，是否可以防止水平滚动条出现？

I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?

如果我的图片位于 background-url 标记中， CSS，但是因为这张图片放在SlidesJS轮播内，图片必须来自 img 标签。

I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.

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

At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.

这是我想实现的： http://imgur.com/Nxh5n

这是一个页面布局的示例假设为： http://imgur.com/r9tYx

This is an example of what the page layout is suppose to look like: 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;
}​

推荐答案

href =http://jsfiddle.net/9tRZG/1/> http://jsfiddle.net/9tRZG/1/

Try this: 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 */
}
​

$ b b

要剪裁边缘，您可以执行以下操作： 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 */
}

这篇关于保持图像始终居中，无论浏览器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！