Question

我正在建立一个网站，我正在使用2000px宽的图像。我希望图像在宽屏幕上可见（比如我的 - 我使用电视作为显示器），但较小的屏幕只能看到尺寸足够大的图像尺寸。（休息将被裁剪）。问题是无论视口大小如何，图像都必须居中。我使用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;
}

Answer 1

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

另一种方法是使用@media标签。请参阅http://www.w3schools.com/css/css_mediatypes.asp。在这里，您需要创建一个这样的函数：使用mediacheck获取屏幕大小，然后使用@media设置阈值。

Answer 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小提琴。调整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%;
}

Answer 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;
}

如何告诉图像保持中心 - CSS

3 个答案: