Html 响应式 CSS 背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19746094/
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
Responsive CSS background image
提问by dcd0181
Simple concept, I'd like to have a responsive CSS background image that scales at a 1:1 width/height ratio within a browser window, this is the easy part
简单的概念，我想要一个响应式 CSS 背景图像，在浏览器窗口中以 1:1 的宽度/高度比例缩放，这是最简单的部分
body{
height:100%;
}
.banner{
height:100%;
background: url('path/to/img') center center no-repeat;
background-size:contain;
}
<body>
<div class="banner"></div>
</body>
the problem is I also want to place text inside the background container with word wrapping, and have the height of the background image flow height wise with the text as a browser window resizes.
问题是我还想将文本放置在带有自动换行的背景容器中，并在浏览器窗口调整大小时使背景图像的高度与文本高度一致。
<body>
<div class="banner">
<p>
Lorem ipsum dolor sit amet, in eos idque epicuri...
</p>
</div>
</body>
Is this possible with pure CSS/HTML?
这可以用纯 CSS/HTML 实现吗？
回答by Richard Peck
Background Image
背景图片
One way to do the background is to use background-size: coveras per this post:
制作背景的一种方法是background-size: cover按照这篇文章使用：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Text
文本
To do the text, you could look at using @mediaqueries, but as you've selected the answer, I'll leave the rest up to you guys :)
要制作文本，您可以查看使用@media查询，但是当您选择了答案时，剩下的就交给你们了 :)
回答by Oriol
Try this:
尝试这个：
HTML:
HTML：
<div class="banner">
<img src="https://www.google.es/images/srpr/logo11w.png" />
<div class="content">
Content
</div>
</div>
CSS:
CSS：
.banner {
position: relative;
}
.banner > img{
width: 100%;
height: auto;
}
.banner > .content{
position: absolute;
top: 0;
bottom: 0;
overflow: auto;
}
回答by dcd0181
Based off the answers, for anyone who is interested, to scale a CSS background image proportionately with text wrapping, the following should work in most situations.
根据答案，对于任何有兴趣的人，要使用文本换行按比例缩放 CSS 背景图像，以下内容应该适用于大多数情况。
See the fiddle
看小提琴
First to ensure the background image isn't rendered larger than mobile resolutions, I added a viewport
首先为了确保背景图像不会呈现大于移动分辨率，我添加了一个视口
@media screen and (max-width: 800px){
.viewport {
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
overflow-x:hidden;
overflow-y:scroll;
}
}
<html>
<body>
<div class="viewport">
<!-- background image -->
</div>
</body>
<html>
Then I used the background-size:cover;property with a height of autoon the background element to allow it to flow with text wrapping on mobile devices. To allow the height of the background element to re-size relative to text wrapping, its parent (in this case, body), must have a height of 100%.
然后我在背景元素上background-size:cover;使用了高度为的属性，auto以允许它在移动设备上随文本环绕而流动。要允许背景元素的高度相对于文本换行重新调整大小，其父元素（在本例中为body）的高度必须为100%。
html,body{
height:100%;
}
.banner{
background: url('path/to/banner.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (max-width: 800px){
.viewport {
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
overflow-x:hidden;
overflow-y:scroll;
}
.banner{
height:auto;
}
.banner .banner-container {
position:relative;
overflow:hidden;
}
}
<html>
<body>
<div class="viewport">
<div class="banner">
<div class="banner-container">
<h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
<h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
<h1>Lorem ipsum dolor sit amet, est intellegebat definitionem at</h1>
</div>
</div>
</div>
</body>
<html>
回答by Kerem Zaman
I think it can help you http://www.positioniseverything.net/easyclearing.html. I solved my problem like it by clearing.
我认为它可以帮助您 http://www.positioniseeverything.net/easyclearing.html。我通过清除解决了我的问题。
