Question

我需要根据所包含的背景图片设置<div>的高度，有人可以帮我怎么做吗？ div中有一些文字。

我会在bootply的代码中或者任何其他方法中帮助如何实现这一目标，如何实现这一目标也很棒。

我已经找到了这个stackoverflow，但它对我没有用 - 它用于Wordpress的bootstrap模板。非常感谢！

代码：

<div class="container-fluid" id="uvod">
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

CSS：

.uvod {
    background:url('http://disk.kybernaut.cz/header.png') no-repeat top center;
    height: 550px;
    padding-top: 250px;
    background-size: contain;
}

Answer 1

尝试

＆＃13;

var container = $(".uvod");
var url = container
          .css("background")
          .split(/\s/)
          .map(function(value) {
            return /url/.test(value) 
            ? value.replace(/url\(|\)/g, "")
            : null
          }).filter(Boolean)[0];


var img = new Image;
img.onload = function() {
  container.height(this.height);
  console.log(container.height());
};
img.src = url;

＆＃13;

.uvod {
    background:url('http://disk.kybernaut.cz/header.png') no-repeat top center;
   /* height: 550px; */
    padding-top: 250px;
    background-size: contain;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="container-fluid" id="uvod">
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

＆＃13;

请参阅.height()

div高度基于背景图像

1 个答案: