Question

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

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

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

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

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

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

这是基本标记：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

$(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();
      });
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

希望它有所帮助。

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

3 个答案: