html - 使用 Bootstrap 强制图像缩放

Question

我正在使用 Boostrap 制作静态视差网页，但我遇到了图像无法正确显示的问题。

我有一个自定义样式表，每个子部分都有不同的图像，如下所示:

#LM-sub01{
background: url(../img/32-cover.jpg) no-repeat center;
color: #ffffff;
font-family: 'Lobster', cursive;
font-weight: 300; 
font-size: 400%;
}

在某些部分中，只有一小段文字比图像尺寸小得多。我希望图像缩放到屏幕大小，但显示竞争图像。

Answer 1

无论内容是否填满容器，您都希望容器采用背景图像的大小。有几种方法可以做到这一点

示例 1

使用实际图像，定位容器 position: relative 以包含绝对定位的任何子元素，然后定位内容 position: absolute 并将所有方向设置为 0和溢出:自动

.example {
  position: relative;
}
.example .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto
}

<div class="example">
  <img src="http://lorempixel.com/1200/768/" width="100%" />
  <div class="content">
    <h1> Hello World! </h1>
  </div>
</div>

示例 2

如果您知道图像的大小相同，您可以使用 padding-bottom 技巧，因为 padding-top 和 padding-bottom 给定百分比值时指的是宽度的百分比，这又需要分别对容器和内容进行相对和绝对定位。更改填充底部以适合您的纵横比。

.example {
  position: relative;
  background-image: url('http://lorempixel.com/1200/768/');
  background-size: cover;
  padding-bottom: 75%;
}
.example .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto
}
.

<div class="example">
  <div class="content">
    <h1> Hello World! </h1>
  </div>
</div>

示例 3

如果您不知道图像的大小并且不想使用第一种方法，您可以使用javascript。您实际上无法找到背景图像本身的高度，因此您必须执行以下操作。

1. 从背景图像(浏览器只会加载图像一次)为每个元素创建一个新图像。
2. 将新图像附加到它们相关的元素。
3. 将新图像移出屏幕，这样用户就无法访问它。
4. 找到每个图像的计算高度(宽度设置为容器宽度的 100%)
5. 将每个父元素的高度设置为其图像的高度。

function scaleToBg(queryString) {
  this.elements = document.querySelectorAll(queryString);
  for (var i = 0; i < this.elements.length; i++) {
    var img = new Image();
    img.src = window.getComputedStyle(this.elements[i], null).getPropertyValue("background-image").replace(/url\(|\)/g, '');
    img.onload = function() {
      this.parentNode.style.height = window.getComputedStyle(this, null).getPropertyValue("height");
    };
    img.className = "scaleToBgImg";
    img.style.cssText = "position:absolute;left:-100%; width:100%;";
    this.elements[i].appendChild(img);
  }
  this.resize = function() {
    this.images = document.querySelectorAll(".scaleToBgImg");
    for (var i = 0; i < this.images.length; i++) {
      this.images[i].parentNode.style.height = window.getComputedStyle(img, null).getPropertyValue("height");
    }
  };
  return this;
}
var scale = scaleToBg(".scaleToBg");
window.onresize = function() {
  scale.resize();
};

.scaleToBg {
  background-size: cover;
  background-repeat: no-repeat;
}
#scaleToBg1 {
  background-image: url('http://lorempixel.com/1200/200/');
}
#scaleToBg2 {
  background-image: url('http://lorempixel.com/1200/400/');
}
#scaleToBg3 {
  background-image: url('http://lorempixel.com/1200/600/');
}
#scaleToBg4 {
  background-image: url('http://lorempixel.com/1200/800/');
}

<div class="scaleToBg" id="scaleToBg1"></div>
<div class="scaleToBg" id="scaleToBg2"></div>
<div class="scaleToBg" id="scaleToBg3"></div>
<div class="scaleToBg" id="scaleToBg4"></div>