使用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 的内容定位并overflow: auto

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