Question

我正在尝试开发一个标题区域，它扩展到通常的960px宽容器，而不使用背景图像，我的理由是因为<img>标记在我的情况下会更好用。

我的问题是，如果我将我的图像放在容器中，例如此代码示例：

<style>
   #container {
       width: 960px;
       margin: 0 auto;
   }
</style>
<div id="container">
  <img src="myimage.jpg" alt="my image" />
</div>

我希望能够将此图像作为整个页面的中心，从其容器扩展到视口的末尾，而不添加滚动条，假设图像的大小保持恒定的1280px宽，但是高度各不相同。

我今天早上一直在尝试，但我不认为没有设置溢出就可以完成：隐藏在body标签上，这很糟糕，因为我希望它能够在窗口较小时滚动而不是容器。

我希望你们能帮忙:)。

Answer 1

你是对的，它不起作用。为什么它必须在容器内？

你可以这样做。

<html>
<head>
<style>  
html, body{ 
width: 100%; 
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
} 
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%; 
height: 100%;
}
</style>  
 </head>
<body>
    <div id="page"> 
    <div id="header"> 
      <img src="myimage.jpg" alt="my image" />  
    </div> 
<div id="container">  
</div>
    </div>
</body> 
</html>

Answer 2

如果img要准确放在x-pos：0和Y-pos：0，你可以使用position：absolute来放置它：

img#my_header{

 position:absolute; // Tell the browser to break document work flow for this ID

 z-index:1; // Tell the browser to pull up in the stack this ID by 1

 top:0; // tell the browser to place this ID at 0px from top of view port

 left:0; // tell the browser to place this ID at 0px from left of view port

}

这是一个示例，为了让您了解谁可以打破文档工作流程以将img标记设置到所需的位置...调整顶部和左侧坐标，您应该解决它！

希望它有所帮助！

Answer 3

我的想法与卢卡斯相似。从容器中取出，并将其放入自己的容器中（例如，id =“header”）。将#header设置为width：100％（应该是视口的宽度，overflow：hidden。然后根据需要定位#header - 如果需要，请使用Zuul的绝对定位建议。

...
<style type="text/css">
#header { width: 100%; overflow: hidden; margin: 0; }
</style>
...
<div id="header">
    <img src="myimage.jpg" alt="My Image" />
</div>
...

我认为这应该适合你。

使<img/>标记延伸到css中的标记之外

3 个答案: