如何根据内容创建高度可变的全宽背景图像？
我只是想在网页上放置一个宽度为 100% 的背景图像，以便它可以缩放以适合视口，通过使用以下样式在正文标记后立即放置一个图像，效果很好：
img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
这效果很好，唯一的问题是如果内容的高度小于图像的高度，我希望图像在底部被切断，就像背景图像一样。因此，如果页面内容只有 400 像素高，那么背景图像应该只有 400 像素（即使缩放后，整个高度也应该大于此值）。我不知道如何使用纯CSS（没有javascript）来做到这一点，所以如果有人能指出我正确的方向，我将非常感激？
I'm just trying to put a background image on a webpage with 100% width so it scales to fit the viewport this works fine by having an image immediately after the body tag using the following styling:
img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
This works fine, the only issue being that I want the image to cut off at bottom if the height of the content is less than the height of the image in the same way a background image would. So if the page content is only 400px high then the background image should only be 400px (even if when scaled the full height should be more than this). I'm not sure how to do this using pure CSS (without javascript) so would be very grateful if someone could point me in the right direction?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试使用以下 CSS 属性放置
：Try putting a
<div>around with the following CSS attributes:您可以将其放入内容中并将内容设置为
overflow:hidden。You can put it in your content and set the content to
overflow: hidden.