检测背景图像大小并应用 div 高度

Question

我有一系列带有背景图像和信息面板的 <div> 容器。

在桌面版上，背景图片使用background-size: cover;填充<div>的宽度和高度。

切换到手机时，我已将背景大小更改为background-size: contain;。这是因为我不希望发生任何裁剪，并且让它更像一个内嵌图像。

由于父 <div> 具有固定高度，因此会创建额外的空白区域。

是否可以使用 CSS 或 JavaScript 计算背景图像大小并将其应用于 div 高度？我想在调整视口大小时这样做并避免刷新。

我的目标是在 IE9+ 中获得支持。

这是基本标记：

.row {
  position: relative;
  margin-bottom: 1.5em;
  height: 400px;
  overflow: hidden;
  /* Background image */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 1.5em;
  background-color: #dedede;
  color: #000;
}

@media screen and (max-width: 1000px) {
  .row {
    background-size: contain !important;
  }
}

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

Answer 1

您可以使用源图像创建图像标签设置高度并获取宽度：

$(function() {
  $('.row').each(function() {
    var self = $(this);
    var backgroundImage = self.css('background-image');
    if (backgroundImage.match(/url/)) {
      var img = backgroundImage.match(/url\(['"]?(.*)['"]?\)/)[1];
      $('<img src="' + img + '"/>').appendTo('body').load(function() {
        var img = $(this);
        img.height(self.height());
        self.width(img.width());
        img.remove();
      });
    }
  });
});

.row {
  position: relative;
  margin-bottom: 1.5em;
  height: 400px;
  overflow: hidden;
  /* Background image */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 1.5em;
  background-color: #dedede;
  color: #000;
}

@media screen and (max-width: 1000px) {
  .row {
    background-size: contain !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

  <div class="info">
    <h2>Title</h2>
    <p>Some text goes here</p>
  </div>
  
</div>

Answer 2

您可以将 url 设置为数据属性。

<div class="row js-background" data-background="http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')">

然后以编程方式获取图像并使用 Javascript 检查尺寸...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = document.getElementByClassName('js-background').getAttribute('background');

Answer 3

我用一个 div 做了一个例子，但是你可以在 each 循环中使用它来获取所有图像：

// get the div, it can be in a each loop
var div = $('.row').first();
var imgSrc = $(div).css('background-image').replace(/url\(['"]?(.*)['"]?\)/gi, '$1').split(',')[0].replace('"','');
// load a image with src of background
var image = new Image();
image.src = imgSrc;
// wait a while to load image and get the size
image.onload = function() {
    console.log(this.width);
    console.log(this.height);
}

这里是小提琴：https://jsfiddle.net/as3c2naz/

希望对你有帮助。