自动调整标题图像大小以适应浏览器答案

【问题标题】：resize header image to fit the browser automatically自动调整标题图像大小以适应浏览器
【发布时间】：2013-07-26 04:30:21
【问题描述】：

所以这里我有一个像下面这样的标题图片

我计划将标题图像拉伸到 100% 以适应显示器分辨率，实现此目的的最佳实践和方法是什么？我试过这样做：

.LippoHeader
{
background-image: url('../images/body/headerpng_BG.png');
background-repeat: repeat-x;
width: 100%;
height: 170px;
}
.shadowone
{
width: 100%;
position: absolute;
left: -1px;
top: 172px;
display: inline-block;
}
.shadowtwo
{
width: 100%;
position: absolute;
left: -1px;
top: 173px;
display: inline-block;
}
.shadowthree
{
width: 100%;
position: absolute;
left: -1px;
top: 176px;
display: inline-block;
}

除非我添加：

位置：绝对；

有没有办法做到这一点？如果可能的话我不想添加，我被告知不要将位置设置为绝对，因为这是一种不好的做法

这是标题的屏幕截图：

我也使用了母版页，所以没有正文标记，只有 div 标记，我使用 .ascx 作为面板标题，我的代码是

<div class="LippoHeader">
  <div>
    <img src="images/body/shadow.png" class="shadowone" />
    <img src="images/body/shadow.png" class="shadowtwo" />
    <img src="images/body/shadow.png" class="shadowthree" />
  </div>
</div>

【问题讨论】：

你没有使用body标签？
body 标签是母版页，我使用 .ascx 作为页眉和页脚
啊，所以从新代码中我看到您想在背景图像上叠加三个图像？背景图片占据了整个宽度？
是的，这正是我想说的，哈哈哈。有可能吗？还是我应该想出另一种方法？
这3张叠加图应该如何放置？

标签： css header

【解决方案1】：

据我了解，您想拉伸标题，而不是图像本身；图像正在水平重复。

我将LippoHeader 视为一个 div，它在这个jsFiddle 中没有问题。但是，它不会占用显示器宽度的 100%，而是占用其父级宽度的 100%（在此示例中，body）。这是你的目标吗？

【讨论】：

是的，我的意思是，但在我的情况下，它仍然没有填充 100% 的页面宽度，请查看我的编辑

【解决方案2】：

由于您想要重复图像并让div 占据浏览器窗口的整个宽度而不是实际的单个图像，因此您需要确保html 或body 上没有边距标签。查看提供的 jsFiddle 你会想要删除边距。

html,
body {
     margin: 0;
}

【讨论】：