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

如何集中对齐演示上的图像？
页面上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>

<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" />

---

如果图像位于侧面，则可以隐藏，然后：

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

---

如果您希望图像占页面的100%，它们应该位于

wrap

div之外，因此您需要更改标记并仅对内容使用

wrap

：

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>

<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" />

---

这是最好的解决方案吗？还是有其他方法可以做到这一点，将div的id保留为“wrap”？我相信这与您可以获得的CSS解决方案一样好。您可以尝试这样的方法来实现一些javascript代码，但我在测试中没有发现它是100%可靠的