溢出水平图像而不会导致滚动

Question

我正在尝试让设计工作的图像水平溢出到某一点，但不会导致滚动条。最好用图片解释：

         +-------------------------------------------+
         |                                           | <-- the window
+-------------------------------------------------------------+
|                                                             |
| the image that is really wide                               |
|                                                             |
+-------------------------------------------------------------+
         |                                           |
         |    +--------------------------------+     |
         |    |                                |     |
         |    |    content that should cause   |     |
         |    |    a horizontal scroll         |     |
         |    |                                |     |
         |    +--------------------------------+     |
         |                                           |
         +-------------------------------------------+

基本上，内容是960px。宽图像是1800px。我希望水平滚动条低于960px，但不高于，我希望所有内容在960px以上时都居中。

我知道我之前见过类似的设计。如果有人能够指出我，那就太棒了，或者如果你碰巧有了CSS：）

Answer 1

您可以在css文件中尝试margin: auto。或者你可以绝对定位宽幅图片。然后将其左边距设置为负值，使其居中。

.widePicture{
    position: absolute;
    left: 50%; (this places the left edge in the center)
    margin-left: -900px; (since the pic is 1800px wide, this will center it)
}

Answer 2

尝试在div的背景中放置'非常宽的'图像（无边距，宽度100％），使用css将bg图像居中。 它不会再导致水平滚动

Answer 3

使用overflow获取图片。 使用min-width作为内容。