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

Question

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

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

切换到移动设备时，我已将背景大小更改为 background-size: contain; .这是因为我不希望发生任何裁剪，并且它更像是内联图像。

作为 parent <div>有一个固定的高度，额外的空白正在被创建。

是否可以使用 CSS 或 JavaScript 计算背景图像大小并将其应用于 div 高度？我想在调整视口(viewport)大小时执行此操作并避免刷新。

我的目标是支持 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>