css - 溢出水平图像而不引起滚动

Question

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

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

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

我知道我以前见过类似的设计。如果有人能指点我，那就太好了，或者如果你碰巧有它的 CSS :)

Answer 1

你可以试试margin: autocss文件。或者您可以绝对定位宽画面。然后将它的左边距设置为负值，使其居中。

.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

对图片使用溢出。使用min-width作为内容。