首页 文章

如何在所有屏幕尺寸中显示100%宽度的页脚图像

提问于
浏览
0

我有一个图像,我想显示为页脚的背景图像 . 它应该以所有屏幕尺寸的100%宽度显示,但是目前它在小屏幕中正确显示,而在大屏幕中,它仅显示在屏幕的中央,两侧都是空的,我不想要 .

这是我用来设置页脚Div的背景图像的Css:

.footer-shadow {
    position:relative;
    height: 237px;
    margin-top:0px;
    width: 100%;
    background: url('../img/new_images/footer-bg.png') center center no-repeat;
    background-size: contain;
    color: gray;
}

请帮助我使页脚响应,以便图像调整所有屏幕大小 .

谢谢

3 回答

  • 3

    使用 background-size:cover; 属性可以拉伸图像以覆盖大小(包括裁剪区域)但在许多浏览器中可能无法正确显示,您需要为firefox和IE添加其他webkit参数,如下所示:

    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    
  • 0

    更换

    background-size: contain;
    

    通过

    background-size: cover;
    
  • 0

    如果您希望图像始终为100%宽,请使用以下CSS

    .footer-shadow {
        background-size: 100%;
    }
    

    这会自动生成背景图像 100%width ,并相应地缩放高度 . 您当前使用 background-size: contain; ,将图像缩放为"the largest size such that both its width and its height can fit inside the content area."

相关问题