Html 100% 标题响应宽度答案

【问题标题】：Html 100% header responsive widthHtml 100% 标题响应宽度
【发布时间】：2014-01-30 01:52:44
【问题描述】：

如何创建适应浏览器屏幕的全宽网站标题？

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

我想创建一个完整的 100% 宽度的单个图像标题，您可以单击上面的链接并点击 (ctrl + -)，您可以看到图像随着浏览器缩小而调整。

【问题讨论】：

CTRL +/- 只是缩放你的字体大小——它不会改变浏览器视口的大小。

标签： css image header

【解决方案1】：

取决于你如何使用图像。

作为背景图片，做：

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%;
}

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

【讨论】：

【解决方案2】：

在你的CSS中，添加这个：

header {
  width: 100%;
}

这是working fiddle。

【讨论】：