我正在尝试开发一个标题区域，它可以扩展到通常的 960 像素宽的容器之外，而不使用背景图像，我这样做的原因是因为 <img>标签在我的情况下会更好。
我的问题是，如果我将图像放在容器中，例如以下代码示例:
<style>
#container {
width: 960px;
margin: 0 auto;
}
</style>
<div id="container">
<img src="myimage.jpg" alt="my image" />
</div>
我希望能够以这张图片为中心，横跨整个页面，扩展到它的容器到视口(viewport)的末尾，不添加滚动条，假设图片的大小保持在 1280 像素宽，但是高度不同。
我今天早上一直在尝试，但我认为如果不在 body 标签上设置 overflow:hidden 就无法完成，这很糟糕，因为如果窗口较小，我希望它能够滚动比容器。
希望大家能帮忙:)
最佳答案
你是对的，它不起作用。为什么它必须在容器内？
你可以这样做。
<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>
关于html - 使 <img> 标签延伸到 css 中的 <body> 标签之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3092590/