div全宽的响应式背景图像

Posted 2023-03-05

【中文标题】div全宽的响应式背景图像

【英文标题】：Responsive background image in div full width

【发布时间】：2013-06-27 07:20:01

【问题描述】：

我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像。背景图像在页面的宽度上扩展（并且是响应式的），但图像的高度不是它的全高。好像不知何故被切断了。我正在使用引导框架，我尝试这样做的原因是我想在图像上覆盖一些文本。我尝试了很多不同的东西，但似乎无法弄清楚，求助！

<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;
  

【问题讨论】：

你能简单解释一下你的期望吗？

嗨，德鲁，欢迎来到 SO！ .bg-image 的高度由子元素的内容决定，在本例中为 h1 文本。您需要为.bg-image 指定某种类型的最小高度。您能否详细说明您正在尝试做的事情？谢谢！

谢谢马克！好吧，基本上我正在尝试使 .bg-image 成为页面顶部的一个区域，该区域扩展了整个宽度，并将页面标题包含在其中并居中。这是一个小提琴：

这里有一个更好的小提琴对不起jsfiddle.net/drewjonesy/5HmTM

所以你想看到所有的背景图像，并让它填满页面的最大宽度，但图像高度最多为 450px。最后，您想在图像上放置一些文本（简单标题还是更多？）

【参考方案1】：

我也为离子混合应用背景尝试了这种风格。这也具有背景模糊效果的样式。

.bg-image 
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

【参考方案2】：

这是获得所需设计的一种方法。

从以下 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>

请注意，背景图像现在是文档常规流程的一部分。

应用以下 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;

这是如何工作的

图像被设置为宽度为 100% 的常规流内容，因此它会根据父容器的宽度进行自我调整。但是，您希望高度不超过 450px，这对应于 1200px 的图像宽度，因此将图像的最大宽度设置为 1200px。您可以使用display: block 和margin: 0 auto 使图像居中。

使用绝对定位将文本绘制在图像上。在最简单的情况下，我将h1 元素拉伸为父元素的全宽并使用text-align: center 使文本居中。使用顶部或底部偏移量将文本放置在需要的位置。

如果您的横幅图像的宽高比会发生变化，您将需要使用 jQuery/javascript 动态调整 .bg-image img 的最大宽度值，但除此之外，这种方法有很多好处。

查看演示：http://jsfiddle.net/audetwebdesign/EGgaN/

【讨论】：

感谢您的回答，这正是我想要的，背景被切断/未显示图像的完整高度jsfiddle.net/drewjonesy/5HmTM

【参考方案3】：

当您使用background-size: cover 时，背景图像将自动拉伸以覆盖整个容器。但是，纵横比保持不变，因此您将始终丢失图像的一部分，除非图像的纵横比与其应用的元素相同。

我看到有两种方法可以解决这个问题：

通过设置不保持图像的纵横比 background-size: 100% 100% 这也会让图片覆盖 整个容器，但比例不会保持不变。坏处 是不是这会扭曲你的形象，因此看起来很奇怪， 取决于图像。使用您在小提琴中使用的图像，我 认为你可以侥幸逃脱。

您还可以使用 javascript 计算和设置元素的高度，基于 在它的宽度上，所以它得到与图像相同的比例。这 必须在加载和调整大小时进行计算。它应该是 只需几行代码就足够简单了（随时询问您是否想要一个 例子）。这种方法的缺点是你的宽度可能会变成 非常小（在移动设备上），因此计算出的高度 此外，这可能会导致容器的内容溢出。这 也可以通过更改内容的大小来解决，或者 一些东西，但它增加了解决方案的一些复杂性/