twitter-bootstrap 响应式背景图像上的 html 文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27887521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html text on responsive background image
提问by Boaz
I want to achieve the following:
我想实现以下目标：
Where there is a background image, and a text over it (text position is bootstrap offset-6 col-6)
哪里有背景图片，上面有一个文本（文本位置是 bootstrap offset-6 col-6）
And for it to be responsive.
并使其具有响应性。
The thing is, that unlike conventional background, I do care how the background image is truncated, I need the phone to be visible regardless of the width.
问题是，与传统背景不同，我确实关心背景图像是如何被截断的，无论宽度如何，我都需要手机可见。
I tried:
background: url(background-photo.jpg) center center cover no-repeat fixed;
我试过：
background: url(background-photo.jpg) center center cover no-repeat fixed;
And the invisible imgtrick on How to get div height to auto-adjust to background size?
还有img关于如何让 div 高度自动调整到背景大小的隐形技巧？
In all the cases the phone gets truncated
在所有情况下，电话都会被截断
Assistance will be appreciated
帮助将不胜感激
Edit:
As requested - the original div structure is:
编辑：
根据要求 - 原始 div 结构是：
<div id="hungry">
<div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
<p>Hungry doesn't always happen in the kitchen</p>
</div>
</div>
But I have no problem changing it to whatever works...
但是我可以将其更改为任何有效的方法都没有问题...
采纳答案by Alvaro Montoro
Solution with JavaScript
用 JavaScript 解决
I know this is not a CSS-only solution a I use JavaScript, but it could help as a temporary solution while we look for a CSS thing.
我知道这不是我使用 JavaScript 的仅 CSS 解决方案，但它可以作为我们寻找 CSS 事物时的临时解决方案。
The HTML would be the same as you posted:
HTML 将与您发布的相同：
<div id="hungry">
<div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
<p>Hungry doesn't always happen in the kitchen</p>
</div>
</div>
The CSS for the div with id "hungry" would look like this:
id 为“hungry”的 div 的 CSS 如下所示：
#hungry {
background:url('http://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
background-size:cover;
width:100%;
}
And finally, with JavaScript (I used jQuery to make it easier), you resize the height of #hungrydepending on the screen width:
最后，使用 JavaScript（我使用 jQuery 使其更容易），您可以#hungry根据屏幕宽度调整高度：
// you know the size for your image
imageWidth = 1919;
imageHeight = 761;
imageProportion = imageHeight/imageWidth;
function resizeJumbo() {
$("#hungry").css({ height: $(window).width() * imageProportion });
}
$(window).on("resize", function() {
resizeJumbo();
});
$(document).ready(function() {
resizeJumbo();
});
You can see a demo working on this fiddle: http://jsfiddle.net/hyfz0Lga/.
你可以看到一个关于这个小提琴的演示：http: //jsfiddle.net/hyfz0Lga/。
Solution with CSS only
仅使用 CSS 的解决方案
Just update the CSS for the hungry div a little:
只需稍微更新一下饥饿的 div 的 CSS：
#hungry {
background:url('http://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
background-size:cover;
width:100%;
padding-top:20%;
padding-bottom:20%;
}
You can see it working here: http://jsfiddle.net/hyfz0Lga/1/.
你可以在这里看到它的工作：http: //jsfiddle.net/hyfz0Lga/1/。
Why padding-top:20%and padding-bottom:20%?
为什么padding-top:20%和padding-bottom:20%？
Those values have to do with the size of the picture, and the proportion between them. In your case: width = 1919 and height = 761, so the proportion between width and height is (761 / 1919) * 100 = 39.65%. Just add half that value on top, and half that value at the bottom, then the text will remain always in the middle, and the picture will always be proportional.
这些值与图片的大小以及它们之间的比例有关。在您的情况下：宽度 = 1919 和高度 = 761，因此宽度和高度之间的比例为 (761 / 1919) * 100 = 39.65%。只需在顶部添加该值的一半，在底部添加该值的一半，那么文本将始终保持在中间，并且图片将始终成比例。
I know it's a bit "hacky" and plays with knowing some data, but it seems to be working fairly well.
我知道它有点“hacky”，并且会了解一些数据，但它似乎工作得相当好。
回答by Coding Enthusiast
you could try tweaking the jumbotron class in Bootstrap 3 just like i did for my website.
您可以尝试调整 Bootstrap 3 中的 jumbotron 类，就像我为我的网站所做的那样。
.jumbotron {
background: url('background-photo.jpg') no-repeat center center;
}
you could change the dimension of the jumbotron depending on the dimensions you want.
您可以根据所需的尺寸更改超大屏幕的尺寸。
<div row jumbotron>
<div class="col-md-6 col-md-offset-6">text</div>
</div>
