在页面上集中对齐溢出的图像

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

link

Answer 1

如果您希望图片位于页面的100％位置，则它们应位于wrap div之外，因此您需要更改标记并仅对内容使用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;
}

<强> Demo fiddle

Answer 2

如果两侧的图像，你可以隐藏，然后：

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