Как заставить ширину блока подстраиваться под размер фона?

Question

[krainoff99]

Есть код
<div id="head_f"></div>

div#head_f {  
  background: #0084B4 url(http://webo4ka.ru/Ucoz8/458320612.png) no-repeat center fixed;  
  width: 100%;  
  height: 300px;  
  z-index: -999;  
  background-size: contain  !important;  
  }

background меняется произвольно(как поставит пользователь)
и если картинка маленькая то ширина блока должна подстраиваться под ширину фона.
height:100% не катит,блок пустой.
Как можно реализовать такое?

Comments

[Сергей delphinpro]

никак
Определяйте размеры картинки на сервере и вставляйте инлайн-стили

[krainoff99]

Сергей: а как это реализовать ?

Answer 1

[Дмитрий Пыркин]

через js, брать ширину и относительное ее выставлять высоту, все это вставлять в background-size

Comments

[krainoff99]

Как получить с сервера размеры ?

[Дмитрий Пыркин]

при загрузки страницы эти размеры есть

[krainoff99]

Дмитрий Пыркин: https://jsfiddle.net/poqm4gnv/1/

[krainoff99]

Переменную добавить ?

[Дмитрий Пыркин]

krainoff99: вот код по определение размера картинки

SCRIPT
var img = new Image;
img.src = $('#imgBlock').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;
var divH = $("#imgBlock").height();
var divW = $("#imgBlock").width();
$("#original").html(bgImgWidth+'х'+bgImgHeight);

HTML



Оригинал:

[Дмитрий Пыркин]

"


Оригинал: "

[krainoff99]

Дмитрий Пыркин: и как мне его совместить?Простите за глупые вопросы..

[Дмитрий Пыркин]

вешаешь на загрузку страницы, только вместо #imgBlock ставите #head_f