Question

我有一个图像，我想显示为页脚的背景图像。它应该以所有屏幕尺寸的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;
}

请帮我设置页脚响应，以便根据所有屏幕尺寸调整图像。

谢谢

Answer 1

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

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

这会自动使背景图像的宽度 100％，并相应地缩放高度。您目前使用background-size: contain;，它将图像缩放到＆＃34;最大尺寸，使其宽度和高度都可以放在内容区域内。＆＃34;

Answer 2

替换

background-size: contain;

通过

background-size: cover;

Answer 3

使用伸展图像的background-size:cover;属性来覆盖大小（包括裁剪区域）但在许多浏览器中可能无法正确显示，您需要为firefox和IE添加额外的webkit参数，如下所示： / p>

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

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

3 个答案: