Html 100％标头响应宽度

Question

如何创建可调整到浏览器屏幕的全宽网站标题？

滑块示例：http://dandywebsolution.com/skdslider/

我想要创建一个100％宽度的单个图像标题，您可以点击链接上方并点击（ctrl + - ），您可以通过缩小浏览器来查看图像调整。

Answer 1

在你的CSS中，添加：

header {
  width: 100%;
}

这是working fiddle。

Answer 2

取决于您如何使用图片。

作为背景图片，请执行：

header {
    width: 100%;
    background: url(whatever.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如果是img-tag，请执行：

header {
    width: 100%;
}

#headerImg {
    width: 100%;
}

您必须在包含标题到body / html的每个元素中将宽度设置为100％。