div 全宽中的响应式背景图像
[英] Responsive background image in div full width
本文介绍了div 全宽中的响应式背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试弄清楚如何在 div 全宽和响应中制作背景图像.背景图像在整个页面的宽度上扩展(并且是响应式的)，但图像的高度不是它的全高.它似乎以某种方式被切断了.我正在使用引导程序框架，我尝试这样做的原因是我想在图像上覆盖一些文本.我尝试了很多不同的东西，但似乎无法弄清楚，帮助！
<div class="容器"><div class="row-fluid"><div class="span12"><h1>这是一些文字</h1>
.bg-图像{背景: url(img/image.jpg) 无重复中心顶部；-webkit-background-size: 封面；-moz-background-size: 封面；-o-背景尺寸:封面；背景尺寸:封面；最大高度:450px；}
解决方案
这是获得您想要的设计的一种方法.
从以下 HTML 开始:
<div class="row-fluid"><div class="span12"><div class="nav">导航区域</div><div class="bg-image"><img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg"><h1>这是居中文本.</h1>
<div class="main">主区域</div>
请注意，背景图像现在是文档常规流程的一部分.
应用以下 CSS:
.bg-image {位置:相对；}.bg-image img {显示:块；宽度:100%；最大宽度:1200px；/* 对应最大高度 450px */边距:0 自动；}.bg 图像 h1 {位置:绝对；文本对齐:居中；底部:0；左:0；右:0；白颜色;}.nav, .main {背景色:#f6f6f6；文本对齐:居中；}
这是如何工作的
图像被设置为宽度为 100% 的常规流内容，因此它会根据父容器的宽度进行自我调整.但是你希望高度不超过450px，对应1200px的图片宽度，所以设置图片的最大宽度为1200px.您可以使用 display: block 和 margin: 0 auto 保持图像居中.
文本通过使用绝对定位绘制在图像上.在最简单的情况下，我将 h1 元素拉伸到父元素的全宽并使用 text-align: center使文本居中.使用顶部或底部偏移量将文本放置在需要的位置.
如果您的横幅图像的纵横比会发生变化，您将需要使用 jQuery/Javascript 动态调整 .bg-image img 的最大宽度值，否则，这种方法有提供很多.
查看演示:http://jsfiddle.net/audetwebdesign/EGgaN/
I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's being cut-off somehow. I'm using bootstrap framework, and the reason I'm trying to do this is I want to overlay some text on the image. I've tried so many different things but cant seem to figure it out, help!
<div class="bg-image">
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>This is some text</h1>
</div>
</div>
</div>
</div>
.bg-image {
background: url(img/image.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height: 450px;
}
解决方案
Here is one way of getting the design that you want.
Start with the following HTML:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
Note that the background image is now part of the regular flow of the document.
Apply the following CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
How This Works
The image is set an regular flow content with a width of 100%, so it will adjust itself responsively to the width of the parent container. However, you want the height to be no more than 450px, which corresponds to the image width of 1200px, so set the maximum width of the image to 1200px. You can keep the image centered by using display: block and margin: 0 auto.
The text is painted over the image by using absolute positioning. In the simplest case, I stretch the h1 element to be the full width of the parent and use text-align: center
to center the text. Use the top or bottom offsets to place the text where it is needed.
If your banner images are going to vary in aspect ratio, you will need to adjust the maximum width value for .bg-image img dynamically using jQuery/Javascript, but otherwise, this approach has a lot to offer.
See demo at: http://jsfiddle.net/audetwebdesign/EGgaN/
这篇关于div 全宽中的响应式背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
