Question

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

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

我希望图像缩放并在屏幕调整大小时填充60％最大高度100％最小宽度的整个高度/宽度（响应时，移动时高度为40％）。我不希望任何裁剪，因为它调整大小。（最糟糕的是，只是裁剪顶部，主要焦点是两侧仍然没有裁剪）

我尝试了背景大小：封面 - 当肖像和其他奇怪的尺寸（特别是手机和肖像）时，它会产生很多作用

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

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

跨浏览器支持importent以及

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

干杯

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>

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

1 个答案:

更新