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

Question

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

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

我希望图像在屏幕调整大小时缩放并填充 60% 最大高度 100% 最小宽度的整个高度/宽度（响应式，移动时 40% 高度）。我不想在调整大小时进行任何裁剪。 （最坏的情况，只裁剪顶部，重点是侧面保持未裁剪）

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

我尝试了 background-size: contains - 调整大小时没有正确填充空间。

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

• 跨浏览器支持也很重要

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

• 干杯

Answer 1

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

小提琴示例：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>

---

更新：

如果您只想在标题而不是正文上使用它，则无需使用伪元素。只需将标题高度设置为 60%。

更新的小提琴：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>