【问题标题】:CSS DIV scrollbar and background with min-widthCSS DIV 滚动条和带最小宽度的背景
【发布时间】:2012-08-16 10:31:31
【问题描述】:

我有一个 1400 像素宽的标题 DIV,其中包含一个必须始终居中的背景图像。

我有一个需要 960 像素宽的网站。

当我调整浏览器的大小(缩小它)时,在达到 960 像素之前我不想要任何水平滚动条,但标题/背景上较大的宽度会导致这种情况。

是否可以在调整大小时停止所有水平滚动条直到 960px 并保持标题 div 中的背景图像居中??

任何帮助表示赞赏!我在这里设置的一些代码用于快速测试...

http://jsfiddle.net/gVuvk 背景图像的宽度为 1400 像素。我需要滚动条从 960 像素开始,而不是 1400 像素。这可能吗?

【问题讨论】:

    标签: css


    【解决方案1】:

    #header的宽度从固定像素更改为100%

    演示http://jsfiddle.net/wNSTD/3/

    【讨论】:

    • 这适用于示例 - 但意识到我做错了什么......新版本 ehre - 请注意图像现在是内联的 - 而不是背景。有什么方法可以为其中包含宽图像的 div 执行相同的最小宽度? jsfiddle.net/wNSTD/5
    • @lowercase 你可以使用#header img {width:100%} 这将适合图像的宽度,但也会调整高度以保持纵横比。
    • 感谢您的帮助,但当我使用 jquery 运行它时仍然无法正常工作。此处的新 JSFiddle 显示了正在运行的 jquery 插件。 jsfiddle.net/gVuvk 背景图片宽度为1400px。我需要滚动条从 960 像素开始,而不是 1400 像素。这可能吗?
    【解决方案2】:

    尝试摆弄最小宽度,如果这不起作用,请使用边距,css auto-margins 在这里很有用。所以,做这样的结构:

    <style>
    .center_image
    {
      margin: auto auto; // or you can modify the x or y seperately
      background-image:url("somesite.jpg");
    }
    </style>
    
    <div class="outer">
      <div class="center_image">
    

    【讨论】:

      【解决方案3】:

      将标题的宽度设置为 100% 并将背景图像居中。

      background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
      width: 100%;
      

      演示:http://jsfiddle.net/post_erasmus/Hn6Zb/1/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-17
        • 2014-08-27
        • 1970-01-01
        • 2019-10-24
        • 2013-07-08
        • 2023-01-23
        • 2012-08-18
        • 1970-01-01
        相关资源
        最近更新 更多