1/3屏幕，全屏背景，响应缩放
1/3屏幕，全屏背景，响应缩放
提问于 2014-12-17 06:57:26
我正在使我的主页有一个大的图像(只是一个静态的图像，也许是幻灯片或什么以后)，我的高度设置为60%，宽度100%。设置为css中的背景图像(单独样式表)
这是一个详细的图像，占据全部宽度，占据整个空间。
我希望图像缩放和填充整个高度/宽度的60%的最大高度100%的分钟宽度，因为屏幕大小(响应，40%的高度，当移动)。我不想任何剪裁，因为它调整大小。(在最坏的情况下，只需裁剪顶部，主要关注的是边沿仍未修剪)
我试过背景尺寸:当人像和其他奇怪的尺寸(特别是移动和肖像)时，它长得很好。
我试过背景大小: contain -在调整大小时不能正确地填充空间。
基本上，所有的“全屏背景”教程都不能工作，因为它最多只有1/2左右的屏幕。
- 跨浏览器支持的重要性
希望我解释得足够好，任何帮助都是非常感谢的。
- 干杯
Stack Overflow用户
回答已采纳
发布于 2014-12-17 07:44:30
您可以对较小的屏幕使用媒体查询。因为你想要限制背景的高度，但又保持高宽比，你将不得不使用黑客通过应用背景到一个伪元素。
示例小提琴： 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%。
更新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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27519888
复制相关文章
相似问题
腾讯云开发者
