【问题标题】:CSS to center full-width banner image without scrollbarsCSS 使全宽横幅图像居中,没有滚动条
【发布时间】:2015-12-24 11:30:12
【问题描述】:

我有一个内容为 1000 像素宽的页面。在这个页面大约一半的地方,我需要显示一个 600 像素高和 2000 像素宽的图像。

此图像应始终为 600 像素高,保持其纵横比,任何无法适应当前浏览器宽度的内容,应在左右两侧均等地下降(因此图像在浏览器窗口更改时保持居中) .

只有图像 - 上面什么都没有。

我尝试构建一个 div 并将图像放在它之外(超过 1000 像素,但无法使其工作。如果我将它从容器中取出,它可以使用:

.wideimage {
    background: url(../images/wide.jpg) no-repeat center center;
    height:600px;
}

这可行,但如果我能在 1000px 容器内执行此操作并让图像落在浏览器窗口边缘之外会更好。

【问题讨论】:

    标签: html css image width


    【解决方案1】:

    要使图像落在容器外并居中,请尝试将其设为绝对值,向左 50% 并将边距偏移图像宽度的一半:https://fiddle.jshell.net/7vpmndfo/1/

    .wideimage {
      position:absolute;
      left:50%;
      margin-left:-1000px;
    }
    

    并且为了防止浏览器上出现水平滚动条,您需要将页面放在包装器 div 中(如果还没有的话)并带有 overflow:hidden;

    【讨论】:

      【解决方案2】:

      如果您有各种各样的图像,因此可能事先不知道图像的宽度,您可以使用经典的“居中”css 技术将图像居中:

      .wideimage {
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2016-02-16
        • 1970-01-01
        • 2017-05-25
        • 1970-01-01
        • 2011-09-04
        • 1970-01-01
        • 2020-07-31
        相关资源
        最近更新 更多