высота div на основе фонового изображения

97
7

Мне нужно установить высоту <div> на основе фонового изображения, которое содержится, может ли кто-нибудь помочь мне, как это сделать? В div есть текст.

Я бы прожил либо помощь, как добиться этого в моем коде в bootply или любом другом подходе, как добиться этого было бы здорово.

Я уже нашел этот qaru.site/questions/75191/..., но он не сработал для моего - он использовался в шаблоне bootstrap, используемом для Wordpress. Большое спасибо!

Код:

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

спросил(а) 2015-03-22T19:56:00+03:00 4 года, 11 месяцев назад
1
Решение
49

Пытаться

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;

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

Смотрите .height()

ответил(а) 2015-03-22T20:12:00+03:00 4 года, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема