html - 1/3 屏幕，具有响应缩放的全屏背景

Question

我正在让我的主页有一个大图像(现在只是一个静态图像，可能是幻灯片或以后的东西)并且我将高度设置为 60%，宽度为 100%。在 css 中设置为背景图片(单独的样式表)

它是一个详细的图像，占据了整个宽度，占据了整个空间。

我希望图像在屏幕调整大小时(响应式，移动时为 40% 高度)缩放并填充 60% max-height 100% min-width 的整个高度/宽度。我不想在调整大小时进行任何裁剪。 (最糟糕的是，只裁剪顶部，主要关注的是两侧保持未裁剪)

我试过 background-size: cover - 当纵向和其他奇怪的尺寸(尤其是移动和纵向)时它会裁剪很多

我试过 background-size: contain - 调整大小时无法正确填充空间。

基本上所有“全屏背景”教程都不起作用，因为它最多只有大约 1/2 屏幕。

• 跨浏览器支持也很重要

希望我解释得足够好，非常感谢任何帮助

• 干杯

Answer 1

您可以对较小的屏幕使用媒体查询。因为你想通过高度限制背景并保持纵横比，你将不得不通过将背景应用到伪元素来使用 hack。

fiddle 示例:http://jsfiddle.net/abhitalks/nxydcu70/2/

示例片段:(查看全屏并调整大小以查看)

html, body { 
    box-sizing: border-box; margin:0; padding:0; 
    width: 100%; height: 100%; overflow: hidden; 
}
body { color: #fff; text-shadow: 0px 0px 8px #333; }
body::before {
    content: ''; transition: all 500ms; 
    position: absolute; left: 0; right: 0; height: 70%;
    z-index: -10;
    background-origin: border-box;
    background: url("http://lorempixel.com/1000/600") bottom center / cover no-repeat transparent; 
}

@media (max-width: 767px) {
    body::before {
        content: ''; transition: all 500ms; 
        position: absolute; left: 0; right: 0; height: 40%;
        z-index: -10;
        background-origin: border-box;
        background: url("http://lorempixel.com/1000/600") center center / cover no-repeat transparent; 
    }
}

<h1>Responsive background limited by height</h1>

---

更新:

如果你只想在header而不是body上使用它，那么就不需要使用伪元素了。只需将页眉高度设置为 60%。

更新 fiddle :http://jsfiddle.net/abhitalks/pmtr5707/2/

更新的代码段:

* { box-sizing: border-box; margin:0; padding:0; }
html, body { 
    width: 100%; height: 100%; overflow: hidden; 
}
header {
    width: 100%; height: 60%;
    background-origin: border-box;
    background: url("http://lorempixel.com/1000/600") bottom center / cover no-repeat transparent; 
    transition: all 500ms; 
}
header > h1 { color: #fff; text-shadow: 0px 0px 8px #333; }
header, section, footer { padding: 15px; }
footer { border-top: 1px solid #eee; }

@media (max-width: 767px) {
    header {
        width: 100%; height: 40%;
        background-origin: border-box;
        background: url("http://lorempixel.com/1000/600") center center / cover no-repeat transparent; 
        transition: all 500ms; 
    }
}

<header><h1>Header</h1></header>
<section><p>Content</p></section>
<footer><h2>Footer</h2></footer>