【问题标题】：100% width Background Image100% 宽度背景图片
【发布时间】：2013-10-20 18:39:44
【问题描述】：

我正在尝试制作 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>

【问题讨论】：

我不确定这是否正是您想要的，但我使用 fluidratio 样式在您的 here 上找到了一些很酷的结果 description div，与当然，高度重置为 400px 和图片的 url。（我从#header 中删除了高度和背景样式以执行此操作）

标签： html css image tumblr

【解决方案1】：

这篇出色的博文准确解释了您的需求，无需任何第三方工具：

http://css-tricks.com/perfect-full-page-background-image

此外，还有一些 jQuery 插件，包括：

【讨论】：

这没有回答问题。

【解决方案2】：

所以...

封面的作用（在我看来）是获取背景图像，并根据其所在框的高度或宽度尽可能地使用它。有两种方法可以解决这个问题.一种方法是使框成为图像的完美比例。另一种是实际使用 img 将框拉伸到它的确切大小。以下是每个操作的方法。背景图像版本的优点是，您可以轻松地使用@media 规则仅将小版本提供给小屏幕。

HTML

<header class="container global-header"></header>

<header class="container global-header2">
    <img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>

CSS

html, body {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    float: left;
}

.global-header {
    width: 100%;

    /* this is hacky - but it is your answer */
    height: 0;
    padding-bottom: 25%;

    background-image: url("http://placekitten.com/400/100");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* you should have this too */
    background-position: center center;
}

.global-header2 {
    width: 100%;
    /* height will be determined by image size */
}

.global-header2 img {
    display: block;
    width: 100%;
    height: auto;
}

FIDDLE

【讨论】：

【解决方案3】：

使用：

background-image: url(../images/myimage.jpg);
background-size: cover;

你想要在页眉还是主页上的背景图片？

目前在标题中。

如果要覆盖整个页面，请在html标签上设置背景图片。

Nasser 的链接是一个很好的链接（不过我会省略浏览器特定的黑客攻击）。

编辑

啊，你说的是宽度。

我认为这可能与 tumblr 从右侧进入的令人讨厌的滑块有关 - 它太拉伸了。

我建议在 jsfiddler 或其他单独的网站上尝试这些样式 - 你可能会发现它工作正常。

【讨论】：