CSS 百分比问题

Question

我有一个页脚图像显示在页脚div中。页脚图像大部分是黑色的，所以我希望页脚的左右区域的div是黑色的，并延伸到页面的边缘。我无法做到这一点。我将不胜感激任何帮助。下面是我的css代码，然后是相关的HTML代码：.CSS：

body{
width: 1196px;
    margin-top: 2px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
}
.footer {
    width:1196px;
    float: left;
    height: 572px;
}

.HTML：

 <div class="footer"><img src="images/footer.jpg" width="1196" height="572"/></div>

Answer 1

一种方法

是从body中删除固定width并为footer提供width:100%，然后您可以使用display:block + margin:auto将footer img居中

body {
  margin: 2px auto 0;
  font-family: Verdana, Geneva, sans-serif;
}
.footer {
  max-width: 100%;
  background: black
}
img {
  display: block;
  margin: auto
}

<div class="footer">
  <img src="//dummyimage.com/1196x572" />
</div>