0

我正在尝试制作 100% 的背景图像并将图像作为背景。当我上传图片时，它会达到 100%，但它会切断图片。它使图像比我的屏幕更宽。如何在图片宽度为 100% 但图像宽度适合屏幕而不会被截断的情况下修复它。这是我的 tumblr，让你明白我的意思（http://ophelialogy.tumblr.com/），这里是完整的图片，向你展示完整的图片，让你知道它在哪里被切断（http:// imageshack.us/a/img7/7103/khb3.png）。

这是我的代码：CSS PART

    /* --- 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>
4

3 回答 3

0

利用：

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

你想要在标题或主页上的背景图像？

它目前在标题中。

如果您希望它覆盖整个页面，请在 html 标记上设置背景图像。

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

编辑

AHH 你说的是宽度。

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

我建议在 jsfiddler 或另一个单独的站点上尝试这些样式，您可能会发现它工作正常。

于 2013-10-20T18:57:59.007 回答
0

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

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

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

于 2013-10-20T18:59:09.310 回答
0

所以...

封面所做的（在我看来）是获取背景图像，并根据它所在的盒子的高度或宽度尽可能地使用它。有两种方法可以解决这个问题。一种方法是使框成为图像的完美比例。另一种是实际使用 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;
}


小提琴

于 2013-10-20T19:11:02.247 回答