使一个<img>标记延伸过去<body>标记在css

我试图开发一个标题区域扩展超过通常960px宽容器，而不使用背景图像，我的原因是因为<img>标记会更好地工作在我的情况。使一个<img>标记延伸过去<body>标记在css

我的问题是，如果我将在容器中我的形象，像这样的代码示例：

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

我希望能够利用这个图像的中心是，在整个页面，扩大过去的容器添加到视口的末端，而不添加滚动条，假设图像的大小保持在1280px的恒定宽度，但高度不同。

我一直想今天上午，但我不认为它可以在不设置溢出来完成：藏在身上的标签，这是不好的，因为我想它牛逼OBE能够滚动如果窗口比容器小。

我希望你们能帮忙:)

来源

2010-06-22 studioromeo

有什么理由使用''，而不是一个背景图像？ – 2010-06-22 11:39:43

嗨抱歉这么晚才回复，原因是尝试做同样任务的替代方法。我的老解决方法是使用一个包装器，应用背景图像，然后设置960的最小宽度，以便在调整大小时，背景图像停止尝试处于e中心点（如果有意义的话）。我的想法与标签是复制这个，原本我只是希望它会是一个负利润率的情况下，但我忘记了溢出方面：\ 经过一段时间的围绕之后，我想我可能会发布在这里看看是否有其他人试图做同样的事情。 – studioromeo 2010-06-22 18:22:55

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

你可以不喜欢这样。

<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>

来源

2010-06-22 11:50:49

对不起卢卡斯，没有运气。 – studioromeo 2010-06-22 11:52:30

你的第二次尝试:)这工作我侦察感谢卢卡斯，但是我想从创建两个容器坚持了，所以我侦察我就要用我原来的背景图片的方式坚持:)谢谢你曾经那么多的支持然而！ :) +1 – studioromeo 2010-06-22 18:34:17

如果IMG是否正好位于x-POS放置：0和Y-POS：0，你可以使用的位置是：绝对放置它：

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标签设置到所需的位置......调整顶部和左侧坐标，你应该解决它！

希望它有帮助！

来源

2010-06-22 11:53:26 Zuul

感谢您的回答！我试过但没有运气，它定位它很棒，但是滚动条仍然出现在一个大图像上（比如说1280px）我想我现在可以看到为什么我们使用背景图像而不是img标签来处理这种事情 – studioromeo 2010-06-22 18:31:19

我的想法是类似于卢卡斯的。从容器中取出，并放入它自己的容器中（例如，id =“header”）。设置的#header为width：100％（这应该是视口的宽度和溢出：。。隐藏然后，只要你想放置的#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> 
...

我认为，应该制定出适合您。

来源

2010-06-22 16:05:24

使一个<img>标记延伸过去<body>标记在css

回答

相关问题