图片未触及 Body 的一侧

Question

首先，这里是 link 到 jsfiddle，其中包含我遇到的问题的示例。我想要的是屏幕顶部的横幅，可以完美地填充 header。我不太幸运 CSS 和我一起工作。

这是我的代码：

<body>
  <header>
    <img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" alt="Banner">

    <h1>Sample Text<br></h1>
  </header>

  <main>
  Oh boy some sample text
  </main>

  <footer>
    More Sample Text
  </footer>
</body>

并且：

html, body  {
    border: 0px;
    margin: 0px auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;

  width: 950px;
  border: 2px solid black;
  box-shadow: 0 9px 18px 9px black;

  background-color: white;
}

header {
  border-bottom: 3px solid #800000;
  padding-top: 1.5em;
  padding-bottom: 0em;
  padding-left: 2em;

  background-color: grey;
}

main {
  clear: left;
  padding-top: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
}

footer { 
  border-top: 2px solid black;
  padding: 15px;
}

如有任何帮助，我们将不胜感激。

Answer 1

试试这个代码

html

<body>
  <header>
    <img src="http://rockstartemplate.com/blogheaders/bannerdesign2.jpg" alt="Banner">

    <h1>Sample Text<br></h1>
  </header>

  <main>
  Oh boy some sample text
  </main>

  <footer>
    More Sample Text
  </footer>
</body>

css

html, body  {
    border: 0px;
    margin: 0px auto;
}

body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;

  width: 950px;
  border: 2px solid black;
  box-shadow: 0 9px 18px 9px black;

  background-color: white;
}

header {
  border-bottom: 3px solid #800000;
  padding-top: 1.5em;
  padding-bottom: 0em;
  padding-left: 2em;
  background-color: grey;
  min-height: 200px;
  position: relative;
  z-index: 1;
}

header img{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  z-index: -1;

}

main {
  clear: left;
  padding-top: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
}

footer { 
  border-top: 2px solid black;
  padding: 15px;
}

Answer 2

从这个 css 中移除 padding-left:

header {
  border-bottom: 3px solid #800000;
  padding-top: 1.5em;
  padding-bottom: 0em;
  padding-left: 2em;

  background-color: grey;
}

Answer 3

body {width: 1000px;}

或

img {max-width:900px;}

只需调整 css 即可使图像看起来居中。

图片未触及 Body 的一侧

Image Not Touching the Side of Body

html

css

image

border

margins