我正在尝试制作 100% 的背景图像，并将图像作为背景。当我上传图片时，它会变为 100%，但它会切断图片。它使图像比我的屏幕宽。如何修复图片宽度为 100% 但图像宽度适合屏幕而不会被截断的位置。这是我的 tumblr，让你明白我的意思 (http://ophelialogy.tumblr.com/)，这里是完整的图像，向你展示完整的图像，让你知道它在哪里被切断 (http://imageshack.us/a/img7/7103/khb3.png)。
这是我的代码: CSS部分
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML 部分
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>
最佳答案
这篇优秀的博文准确解释了您的需求，无需任何第三方工具:
http://css-tricks.com/perfect-full-page-background-image
此外，还有一些 jQuery 插件，包括:
关于html - 100% 宽度背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19481285/