检测背景图像大小和应用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/

希望能有所帮助。