html - 在页面中央对齐溢出的图像

Question

如何集中对齐演示上的图像？
页面上的 x 轴上没有溢出。
我希望图像完全集中在页面上 + 重要的是要知道，图像总是比页面更宽。图像必须溢出#wrap 元素，并且在页面上为 100% 宽。

HTML

<div id="wrap">
    <p>somecontent here</p>
    <img src="http://www.placecage.com/1000/500">

    <p>some more content here</p>
    <img src="http://www.placecage.com/1000/500">

    below goes footer

    <p>some footer text</p>
    <img src="http://www.placecage.com/1000/500">
</div>

CSS

#wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
}

关联

Answer 1

如果您希望图像是页面的 100%，它们应该在wrapdiv 之外，因此您需要更改标记并wrap仅用于内容：

HTML

<div class="wrap">
    <p>somecontent here</p>
</div>
<img src="http://www.placecage.com/1000/500" />
<div class="wrap">
    <p>some more content here</p>
</div>
<img src="http://www.placecage.com/1000/500" />
<div class="wrap">below goes footer
    <p>some footer text</p>
</div>
<img src="http://www.placecage.com/1000/500" />

CSS

.wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
}

body > img{
    width: 100%;
    vertical-align: top;
}

演示小提琴

Answer 2

如果侧面的图像，您可以隐藏，然后：

#wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
    text-align: center;
    overflow: hidden
}