如何告诉图像保持居中 - CSS答案

【问题标题】：How to tell image to stay centered - CSS如何告诉图像保持居中 - CSS
【发布时间】：2014-01-02 06:18:21
【问题描述】：

我正在建立一个网站，我正在使用 2000 像素宽的图像。我希望图像在宽屏幕上可见（例如我的 - 我使用电视作为显示器），但较小的屏幕只会看到足够大小的图像尺寸。（其余部分将被裁剪）。问题是无论视口大小如何，图像都必须居中。我使用text-align:center; 使文本响应。我确实阅读了类似的主题，但无论我做什么，图像都保持静态而不是居中。请帮忙。

HTML：

<body>
    <div id="wrapper">

        <div class="header">
            <img src="images/design/header.png">
        </div>

        <div class="nav-bar">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="portfolio.html">Portfolio</a>
            <a href="gallery.html">Gallery</a>
            <a href="service.html">Service</a>
            <a href="contact.html">Contact</a> 
        </div>

        <div class="side-bar">
            <h1>This is my side bar</h1>
        </div>

        <div class="content">
            <h1>This is my content</h1>
        </div>

        <div class="footer">
            <h1>This is my footer</h1>
        </div>

    </div>
</body>

CSS：

#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}

【问题讨论】：

标签： css image static center crop

【解决方案1】：

一种方法是使用响应式布局。 Twitter Bootstrap 默认提供相同的功能。

另一种方法是使用@media 标签。请参阅http://www.w3schools.com/css/css_mediatypes.asp。在这里，您将需要编写如下函数：使用 mediacheck 获取屏幕尺寸，然后使用 @media 设置阈值。

【讨论】：

【解决方案2】：

使用以下 css 使图像居中。如果容器小于图像宽度，max-width:100% 将适合图像。图片的宽度和高度将被缩小以适应。

#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}

更新

如果您知道图片的确切高度，请查看this fiddle。调整fullscreen 的大小以查看图像裁剪。

HTML：

<div class="position-img-outer">
    <div class="position-img-inner">
        <img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
    </div>
</div>

CSS：

.position-img-outer
{
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
 .position-img-outer .position-img-inner
{
    display: inline-block;
    position: relative;
    right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
    position: relative;
    left: -50%;
}

【讨论】：

我已经尝试过这个，但是它会在视口的两个轴上缩放图像。还是谢谢你！
效果很好！有什么办法可以消除图像周围的白色间隙？谢谢！
好吧，由于我的声誉，我无法更新图片。问题是图像的每一侧都有 10 像素的间隙，我希望将其移除。谢谢
请检查开发人员工具 (F12) 中的每个元素，以查看从哪个类对图像应用填充。
我刚刚将边距更改为 -8px，现在可以正常工作了。非常感谢您的帮助。我很感激。

【解决方案3】：

如果您知道图片的宽度，可以使用以下方法：

#wrapper .header img{
    position:relative;
    width:2000px;
    left:50%;
    margin-left:-1000px;
}

更新：为避免出现水平滚动条，可以将容器元素设置为width:100% 和overflow:hidden

#wrapper .header {
    position:relative;
    width:100%;
    overflow:hidden;
}

【讨论】：

这正是我所需要的。谢谢！
我刚刚在我的笔记本电脑上试过这个，它会导致水平滚动条。有什么办法可以避免吗？谢谢