Question

我有这个样本：

代码HTML：

<div class="container">
  <div class="row">
        <div class="col-md-6 paddinglist">
            <div class="inner-img">
                <img class="bg-img" src="http://merchandiser-szcel9eb49h.stackpathdns.com/wp-content/uploads/2016/10/home-v3-g1.jpg" alt="" />
            </div>
            <div class="category_name">
                <a href="#">Art & Frames</a>
                <p class="category_desc">Celiac cornhole vice neutra. Succulents freegan four dollar toast pop-up, meggings brooklyn flexitarian irony snackwave. </p>
            </div>
        </div>
        <div class="col-md-6 paddinglist">
            <div class="inner-img">
                <img class="bg-img" src="http://merchandiser-szcel9eb49h.stackpathdns.com/wp-content/uploads/2016/10/home-v3-g2.jpg" alt="" />
            </div>  
            <div class="category_name">
                <a href="#">Art & Frames</a>
                <p class="category_desc">Brooklyn vexillologist vice chia keytar</p>
            </div>
        </div>
    </div>
</div>

CODE JS：

  jQuery(".bg-img").each(function() {
        var urlImg = jQuery(this).attr('src'),
        parent = jQuery(this).parent();
        $(this).remove();
        parent.css(
        {
        'background':'url("'+urlImg+'") no-repeat 50% 0',
        'background-size': 'cover'
        });
    });

我在div上放了一个背景，但由于高度为0，图片不可见。

如何为div创建动态高度？

Answer 1

您可以在js代码中添加高度，如下所示

 jQuery(".bg-img").each(function() {
        var urlImg = jQuery(this).attr('src'),
        parent = jQuery(this).parent();
        $(this).remove();
        parent.css(
        {
        'background':'url("'+urlImg+'") no-repeat 50% 0',
        'background-size': 'cover',
        'height': this.height,
        'width': this.width
        });
    });

Answer 2

您可以使用height:this.height这样设置图像的动态高度。 this.height将返回图片的高度，这将解决您的问题

jQuery(".bg-img").each(function() {
    var urlImg = jQuery(this).attr('src'),
    parent = jQuery(this).parent();
   $(this).remove();
    parent.css(
    {
    'background':'url("'+urlImg+'") no-repeat 50% 0',
     height:this.height,
    'background-size': 'cover'

    });
});

CodePen - https://codepen.io/anon/pen/mqJOvm

Answer 3

尝试以下方法：

jQuery(".bg-img").each(function() {
        var $this = jQuery(this),
            urlImg = $this.attr('src'),
            parent = $this.parent(),
            imgHeight = $this.height();

        parent.height(imgHeight);
        parent.css(
        {
            'background':'url("'+urlImg+'") no-repeat 50% 0',
            'background-size': 'cover'
        });

        $this.remove();
    });

Answer 4

这是你的解决方案：

  jQuery(".bg-img").each(function() {
        var urlImg = jQuery(this).attr('src');
            var imgHeight = $(this).height();
        parent = jQuery(this).parent();
       $(this).remove();
        parent.css(
        {
        'background':'url("'+urlImg+'") no-repeat 50% 0',
        'background-size': 'cover',
          'height': imgHeight
        });
    });

以下是预览链接： https://codepen.io/ziruhel/pen/NwqbeM

设置div的高度以匹配其背景图像

4 个答案: